jQuery validator.js Demos

Required Fields
					    
<script>$( "[data-validator=true]" ).validator( {} );</script>
<form data-validator="true">
    <div class="form-group">
        <input data-required="true"
            type="text" class="form-control">
        <span class="help-block error--required">
            Please fill out this field
        </span>
    </div>
</form>
Please fill out this field
Please fill out this field
Validation Pattern
					
<script>$( "[data-validator=true]" ).validator( {} );</script>
<form data-validator="true">
    <div class="form-group">
        <input
            data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
            type="text" class="form-control">
        <span class="help-block error--required">
            Please enter a valid address
        </span>
    </div>
</form>
Please enter a valid address
Please fill out this field
Required Fields and Field With Validation Pattern
Please fill out this field Please enter a valid address
Please fill out this field 
			        
<form data-validator="true">
    <div class="form-group">
        <input data-required="true"
            data-pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$"
            type="text" class="form-control">
        <span class="help-block error--required">
            Please fill out this field
        </span>
        <span class="help-block error--required">
            Please enter a valid address
        </span>
    </div>
</form>
One of Two fields is Required
Please fill out this field Or some Other one
Please fill out this field Or some Other one Please enter a valid address
Please fill out this field 
			        
<form data-validator="true">
    <div class="form-group">
        <input data-required="true"
            name="email"
            data-or="username"
            type="text" class="form-control">
        <input data-required="true"
            name="username"
            data-or="email"
            type="text" class="form-control">
        <span class="help-block error--or">
            Fill out one of the two Fields
        </span>
    </div>
</form>
Required Fields Two Fields have to have the same Value
					
<form data-validator="true">
    <div class="form-group">
        <input data-required="true"
            name="email"
            data-or="username"
            type="text" class="form-control">
        <input data-required="true"
            name="username"
            data-or="email"
            type="text" class="form-control">
        <span class="help-block error--or">
            Fill out one of the two Fields
        </span>
    </div>
</form>
Please fill out this field
Please fill out this field Please enter a valid address
Field Value has to be the same as the one below Please fill out this field
Field Value has to be the same as the one above Please fill out this field
Custom Validation Callback
					
<form data-validator="true">
    <div class="form-group">
        <input data-required="true"
            data-callback="customValidation"
            type="text" class="form-control">
        <span class="help-block error--callback">
            Your Input is for some Reason Invalid
        </span>
    </div>
</form>
<script>
    /**
     * @param {jQuery} $input
     * @returns {boolean}
     */
    window.customValidation = function( $input ){
        var isValid = false;
        //Do some Voodoo to figure out if the input is Valid
        return isValid;
    }
</script>
Your Input is for some Reason Invalid Please fill out this field