v0.5.3 is released on 2014.11.05!

Playing with HTML 5 input types and attributes

← Examples

Improve it on Github

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

HTML 5 attribute Equivalent validator Equivalent HTML attribute
min="..." greaterThan validator 
data-bv-greaterthan="true"
data-bv-greaterthan-value="..."
max="..." lessThan validator 
data-bv-lessthan="true"
data-bv-lessthan-value="..."
maxlength="...", minlength="..." stringLength validator 
data-bv-stringlength="true"
data-bv-stringlength-max="..."
data-bv-stringlength-min="..."
pattern="..." regexp validator 
data-bv-regexp="true"
data-bv-regexp-regexp="..."
required notEmpty validator data-bv-notempty="true"
type="color" hexColor validator data-bv-hexcolor="true"
type="email" emailAddress validator data-bv-emailaddress="true" 
type="range"
min="..."
max="..."
 between validator 
data-bv-between="true"
data-bv-between-min="..."
data-bv-between-max="..."
type="url" uri validator data-bv-uri="true" 
<form id="html5Form" method="post" class="form-horizontal"
      data-bv-message="This value is not valid"
      data-bv-feedbackicons-valid="glyphicon glyphicon-ok"
      data-bv-feedbackicons-invalid="glyphicon glyphicon-remove"
      data-bv-feedbackicons-validating="glyphicon glyphicon-refresh">
    <div class="form-group">
        <label class="col-sm-3 control-label">Username</label>
        <div class="col-sm-5">
            <input type="text" class="form-control" name="username"
                   data-bv-message="The username is not valid"
                   required data-bv-notempty-message="The username is required and cannot be empty"
                   pattern="^[a-zA-Z0-9]+$" data-bv-regexp-message="The username can only consist of alphabetical, number" />
        </div>
    </div>

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

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

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

    <div class="form-group">
        <label class="col-sm-3 control-label">Age</label>
        <div class="col-sm-2">
            <input type="text" class="form-control" name="age"
                   required
                   min="10" data-bv-greaterthan-inclusive="true" data-bv-greaterthan-message="The input must be greater than or equal to 10"
                   max="100" data-bv-lessthan-inclusive="false" data-bv-lessthan-message="The input must be less than 100" />
        </div>
    </div>
</form>
$(document).ready(function() {
    $('#html5Form').bootstrapValidator();
});