Spectre Forms validation styles class is used to style the form. To use form validation styles, you can either add is-success or is-error class to the controls. Add has-success or has-error class to parent elements. Use the form-input-hint class to provide form validation success and error messages.
Forms Form validation styles Classes:
- is-success: This class is used to set the green color on the element.
- is-error: This class is used to set red the green color on the element.
- has-success: This class is used to set the green color on the element.
- has-error: This class is used to set red the green color on the element.
- form-input-hint: This class is used to set the text faded.
Syntax:
<div class="has-success"> <input class="...is-success"..> <p class="form-input-hint">...</p> </div>
Example:
HTML
<!DOCTYPE html> < html >
< head >
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
< link rel = "stylesheet"
href =
</ head >
< body >
< center >
< h1 class = "text-success" >GeeksforGeeks</ h1 >
< strong >SPECTRE Forms Input types Class</ strong >
< br >< br >
</ center >
< form >
< div class = "input-group" >
< div class = "input-group" >
< span class = "input-group-addon " >
Username
</ span >
< input type = "text"
class = "form-input is-success"
placeholder = "Username"
value = "Mastermind@Pubg" >
</ div >
< span class = "input-group-addon" >
Password
</ span >
< input type = "text"
class = "form-input is-error"
placeholder = "Password"
value = "********" >
</ div >
< br >
< div class = "input-group col-12" >
< span class = "input-group-addon" >
Email Id
</ span >
< input type = "text col-6"
class = "form-input is-success"
placeholder = "Email Id"
value = "mastermind@gmail.com" >
< button class="btn btn-success
input-group-btn
col-3">
LogIn
</ button >
</ div >
< label class = "form-checkbox" >
< input type = "checkbox" >
< i class = "form-icon" ></ i >
I agree that the content of the course
will not be used for any bad purpose
</ label >
< p >
< span class = "text-error" >
Incorrect Password
</ span >
Password hint:
< span class = "form-input-hint" >
Your First School Friend
</ span >
</ p >
</ div >
</ form >
</ body >
</ html >
|
Output:
Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-validation