FormValidation v0.8.1 is released, supports Bootstrap 4 alpha 3

Setting validator options via HTML attributes

← ejemplos

This example illustrates the ability of setting validator options via HTML attributes.

In order to set a specific validator to given field, you have to declare additional attributes for the field. For example:

<input
    data-fv-validatorname="true"
    data-fv-validatorname-validatoroption="..." />

Here are some important points when setting the attributes for field:

  1. validatorname and validatoroption must be lowercase.
  2. Use data-fv-validatorname, data-fv-validatorname="true", or data-fv-validatorname="data-fv-validatorname" to enable particular validator for field.
  3. Set data-fv-validatorname="false" to disable the validator
  4. There are some validators which not all options are configurable via HTML attribute. Refer to each validator documentation to see exactly the equivalent HTML attribute for each option.

If there are multiple elements having the same name, you just need to set the HTML attribute to one of them. For example:

<div class="form-group">
    <label class="col-sm-3 control-label">Gender</label>
    <div class="col-sm-5">
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="male"
                    data-fv-notempty
                    data-fv-notempty-message="The gender is required" /> Male
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="female" /> Female
            </label>
        </div>
        <div class="radio">
            <label>
                <input type="radio" name="gender" value="other" /> Other
            </label>
        </div>
    </div>
</div>
<form id="attributeForm" method="post" class="form-horizontal"
    data-fv-framework="bootstrap"
    data-fv-message="This value is not valid"
    data-fv-icon-valid="glyphicon glyphicon-ok"
    data-fv-icon-invalid="glyphicon glyphicon-remove"
    data-fv-icon-validating="glyphicon glyphicon-refresh">

    <div class="form-group">
        <label class="col-xs-3 control-label">Full name</label>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="firstName" placeholder="First name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The first name is required and cannot be empty" />
        </div>

        <div class="col-xs-4">
            <input type="text" class="form-control" name="lastName" placeholder="Last name"
                data-fv-row=".col-xs-4"
                data-fv-notempty="true"
                data-fv-notempty-message="The last name is required and cannot be empty" />
        </div>
    </div>

    <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"

                data-fv-notempty="true"
                data-fv-notempty-message="The username is required and cannot be empty"

                data-fv-regexp="true"
                data-fv-regexp-regexp="^[a-zA-Z0-9_\.]+$"
                data-fv-regexp-message="The username can only consist of alphabetical, number, dot and underscore"

                data-fv-stringlength="true"
                data-fv-stringlength-min="6"
                data-fv-stringlength-max="30"
                data-fv-stringlength-message="The username must be more than 6 and less than 30 characters long" />
        </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"
                data-fv-emailaddress="true"
                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">Password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="password"
                data-fv-notempty="true"
                data-fv-notempty-message="The password is required and cannot be empty"

                data-fv-different="true"
                data-fv-different-field="username"
                data-fv-different-message="The password cannot be the same as username" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Retype password</label>
        <div class="col-xs-5">
            <input type="password" class="form-control" name="confirmPassword"
                data-fv-notempty="true"
                data-fv-notempty-message="The confirm password is required and cannot be empty"

                data-fv-identical="true"
                data-fv-identical-field="password"
                data-fv-identical-message="The password and its confirm are not the same" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Languages</label>
        <div class="col-xs-5">
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="english"
                        data-fv-notempty="true"
                        data-fv-message="Please specify at least one language you can speak" /> English
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="french" /> French
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="german" /> German
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="russian" /> Russian
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox" name="languages[]" value="other" /> Other
                </label>
            </div>
        </div>
    </div>
</form>

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