Validation States

Convey submission states with simple, extendible style


Update

Add the .form-danger or .form-success class to a form control to notify the user whether or not the value is validated.

Usage



  • <!-- .form-danger -->
    <div class="form-row">
        <label>Form Danger</label>
        <input type="text" class="form-danger">
        <input type="password" class="form-danger">
        <label>
            <input type="checkbox" class="form-danger"> Checkbox
        </label>
        <label>
            <input type="radio" class="form-danger"> Radio
        </label>
        <select class="form-danger">
            <option>...</option>
            <option>...</option>
            <option>...</option>
        </select>
    </div>
    
    <!-- .form-success -->
    <div class="form-row">
        <label>Form Success</label>
        <input type="text" class="form-success">
        <input type="password" class="form-success">
        <label>
            <input type="checkbox" class="form-success"> Checkbox
        </label>
        <label>
            <input type="radio" class="form-success"> Radio
        </label>
        <select class="form-success">
            <option>...</option>
            <option>...</option>
            <option>...</option>
        </select>
    </div>