This site contains the document for old version. Please upgrade to the latest version v1.0.0

Playing with HTML 5 input types and attributes

← Examples

FormValidation supports a few of HTML 5 types, attributes listed as following:

HTML 5 attribute Equivalent validator Equivalent HTML attribute
min="..." greaterThan validator 
data-fv-greaterthan="true"
data-fv-greaterthan-value="..."
max="..." lessThan validator 
data-fv-lessthan="true"
data-fv-lessthan-value="..."
maxlength="...", minlength="..." stringLength validator 
data-fv-stringlength="true"
data-fv-stringlength-max="..."
data-fv-stringlength-min="..."
pattern="..." regexp validator 
data-fv-regexp="true"
data-fv-regexp-regexp="..."
required notEmpty validator data-fv-notempty="true"
type="color" color validator data-fv-hexcolor="true"
type="email" emailAddress validator data-fv-emailaddress="true" 
type="range"
min="..."
max="..."
 between validator 
data-fv-between="true"
data-fv-between-min="..."
data-fv-between-max="..."
type="url" uri validator data-fv-uri="true" 
<form id="html5Form" method="post" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-message="This value is not valid"
    data-fv-feedbackicons-valid="glyphicon glyphicon-ok"
    data-fv-feedbackicons-invalid="glyphicon glyphicon-remove"
    data-fv-feedbackicons-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Username</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="username"
                data-fv-message="The username is not valid"
                required data-fv-notempty-message="The username is required and cannot be empty"
                pattern="^[a-zA-Z0-9]+$" data-fv-regexp-message="The username can only consist of alphabetical, number" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input class="form-control" name="email" type="email"
                required
                data-fv-emailaddress-message="The input is not a valid email address" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Website</label>
        <div class="col-xs-5">
            <input class="form-control" name="website" type="url"
               required
               data-fv-uri-message="The input is not a valid website address" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Fav color</label>
        <div class="col-xs-3">
            <input class="form-control" name="color" type="color"
               required
               data-fv-hexcolor-message="The input is not a valid color code" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Age</label>
        <div class="col-xs-2">
            <input type="text" class="form-control" name="age"
                required

                min="10"
                data-fv-greaterthan-inclusive="true"
                data-fv-greaterthan-message="The input must be greater than or equal to 10"

                max="100"
                data-fv-lessthan-inclusive="false"
                data-fv-lessthan-message="The input must be less than 100" />
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#html5Form').formValidation();
});
</script>