Spectre Forms Form validation styles

Last Updated : 28 Jan, 2022

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">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>