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@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href=
"https://unpkg.com/spectre.css@0.5.9/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>

Output:

Reference: https://picturepan2.github.io/spectre/elements/forms.html#forms-validation

Spectre Forms Form validation styles

Explore