Spectre Forms Form validation styles
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 = "https://unpkg.com/spectre.css/dist/spectre.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-exp.min.css" > < link rel = "stylesheet" href = "https://unpkg.com/spectre.css/dist/spectre-icons.min.css" > </ head > < body > < center > < h1 class = "text-success" >w3wiki</ 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
Contact Us