Skip to content
Related Articles

Related Articles

Spectre Forms Form validation styles

View Discussion
Improve Article
Save Article
  • 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=
    <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:

Spectre Forms Form validation styles

Spectre Forms Form validation styles

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!