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

Validating field with special name

Examples

When using FormValidation with some server-side frameworks such as CakePHP, Symfony, Rails, Spring, etc, there is a relationship between the model name and the name attribute of input.

For example, assuming that an user is modeled by User class with firstName, lastName, username, emails[] properties.

Following the naming convention defined by these frameworks, the inputs in the form of adding new user might have the name attribute such as:

<input type="text" name="user[firstName]" />
<input type="text" name="user[lastName]" />
<input type="text" name="user[emails][]" />

or

<input type="text" name="user.lastName" />
<input type="text" name="user.firstName" />
<input type="text" name="user.emails[]" />

When using FormValidation to validate these kind of fields, you must wrap the field name between single or double quote as following:

$(form).formValidation({
    framework: 'bootstrap',
    fields: {
        'user[firstName]': {
            validators: {
                ...
            }
        },
        'user[lastName]': {
            validators: {
                ...
            }
        },
        'user[emails][]': {
            validators: {
                ...
            }
        }
    }
});

Below is a sample example:

<form id="userForm" class="form-horizontal">
    <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="user[firstName]" placeholder="First name" />
        </div>
        <div class="col-xs-4">
            <input type="text" class="form-control" name="user[lastName]" placeholder="Last name" />
        </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="user[username]" />
        </div>
    </div>

    <div class="form-group">
        <label class="col-xs-3 control-label">Email address</label>
        <div class="col-xs-5">
            <input type="text" class="form-control" name="user[email]" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Add</button>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#userForm').formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            'user[firstName]': {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The first name is required'
                    }
                }
            },
            'user[lastName]': {
                row: '.col-xs-4',
                validators: {
                    notEmpty: {
                        message: 'The last name is required'
                    }
                }
            },
            'user[username]': {
                validators: {
                    notEmpty: {
                        message: 'The username is required'
                    },
                    stringLength: {
                        min: 6,
                        max: 30,
                        message: 'The username must be more than 6 and less than 30 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.]+$/,
                        message: 'The username can only consist of alphabetical, number, dot and underscore'
                    }
                }
            },
            'user[email]': {
                validators: {
                    notEmpty: {
                        message: 'The email address is required'
                    },
                    emailAddress: {
                        message: 'The input is not a valid email address'
                    }
                }
            }
        }
    });
});
</script>