formvalidation/test/spec.js

The best jQuery plugin to validate form fields. Support Bootstrap, Foundation, Pure, SemanticUI, UIKit and custom frameworks

describe('api', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="apiForm">',
                '<div class="form-group">',
                    '<input type="text" name="username" data-fv-notempty data-fv-stringlength data-fv-stringlength-min="8" />',
                '</div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-notempty data-fv-emailaddress />',
                '</div>',
                '<div class="form-group">',
                    '<input type="text" name="note"/>',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#apiForm').formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            }
        });

        this.fv     = $('#apiForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
        this.$note  = $('#apiForm').find('input[name="note"]');
    });

    afterEach(function() {
        $('#apiForm').formValidation('destroy').remove();
    });

    it('revalidateField()', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect(this.fv.isValidField('email')).toBeTruthy();

        this.$email.val('invalid#email.address');
        this.fv.revalidateField('email');
        expect(this.fv.isValidField(this.$email)).toEqual(false);
    });

    it('destroy()', function() {
        this.fv.destroy();
        expect($('#apiForm').data('formValidation')).toBeUndefined();
        expect($('#apiForm').find('i[data-fv-icon-for]').length).toEqual(0);
        expect($('#apiForm').find('.help-block[data-fv-for]').length).toEqual(0);
        expect($('#apiForm').find('.has-feedback').length).toEqual(0);
        expect($('#apiForm').find('.has-success').length).toEqual(0);
        expect($('#apiForm').find('.has-error').length).toEqual(0);
        expect($('#apiForm').find('[data-fv-field]').length).toEqual(0);
    });

    it('getOptions()', function() {
        // Form options
        expect(this.fv.getOptions().icon.valid).toEqual('glyphicon glyphicon-ok');

        // Field options
        expect(this.fv.getOptions('username', 'stringlength')).toBeNull();
        expect(this.fv.getOptions('username', 'stringlength', 'min')).toBeNull();

        expect(this.fv.getOptions('username', 'stringLength')).toBeDefined();
        expect(this.fv.getOptions('username', 'stringLength', 'min')).toEqual('8');
        expect(this.fv.getOptions('username', 'stringlength', 'max')).toBeNull();
    });

    // #1014
    it('isValidField()', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect(this.fv.isValidField(this.$note)).toBeTruthy();
        expect(this.fv.isValidField(this.$email)).toBeTruthy();
    });

    // #1014
    it('validateField()', function() {
        this.$email.val('email@domain.com');
        this.fv.validateField(this.$email);
        this.fv.validateField(this.$note);
        expect(this.fv.isValidField(this.$email)).toBeTruthy();
        expect(this.fv.isValidField(this.$note)).toBeTruthy();
    });
});

describe('autoFocus', function() {
    // Use $element.is(document.activeElement) instead of $element.is(':focus')
    // to support running the test cases with PhantomJS
    // See https://github.com/ariya/phantomjs/issues/10427

    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="autoFocusForm">',
                '<div class="form-group">',
                    '<input type="text" name="username" required />',
                '</div>',
                '<div class="form-group">',
                    '<input type="text" name="email" required data-fv-emailaddress />',
                '</div>',
                '<div class="form-group">',
                    '<button type="submit" id="submitButton">Submit</button>',
                '</div>',
            '</form>'
        ].join('')).appendTo('body');

        this.fv        = $('#autoFocusForm')
                            .formValidation()
                            .submit(function(e) {
                                e.preventDefault();
                            })
                            .data('formValidation');
        this.$username = this.fv.getFieldElements('username');
        this.$email    = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#autoFocusForm').formValidation('destroy').remove();
    });

    it('default option (autoFocus=true)', function() {
        $('#submitButton').click();
        expect(this.$username.is(document.activeElement)).toBeTruthy();
        expect($(document.activeElement).attr('name')).toEqual('username');

        this.fv.resetForm();
        this.$username.val('user_name');
        this.$email.val('');
        $('#submitButton').click();
        expect(this.$email.is(document.activeElement)).toBeTruthy();
        expect($(document.activeElement).attr('name')).toEqual('email');
    });

    it('set autoFocus=false for form', function() {
        $('#autoFocusForm')
                .formValidation('destroy')
                .formValidation({
                    autoFocus: false
                });
        this.$username.val('');
        this.$email.val('invalid#email');
        $('#submitButton').click();

        expect(this.$username.is(document.activeElement)).toBeFalsy();
        expect(this.$email.is(document.activeElement)).toBeFalsy();
    });

    it('set autoFocus=false for all fields', function() {
        this.fv
            .addField('username', {
                autoFocus: false
            })
            .addField('email', {
                autoFocus: false
            });
        this.$username.val('user_name');
        this.$email.val('invalid#email');
        $('#submitButton').click();

        expect(this.$username.is(document.activeElement)).toBeFalsy();
        expect(this.$email.is(document.activeElement)).toBeFalsy();
    });

    it('set different autoFocus value for fields', function() {
        this.fv
            .addField('username', {
                autoFocus: false
            })
            .addField('email', {
                autoFocus: true
            });
        this.$username.val('');
        this.$email.val('invalid_email');
        $('#submitButton').click();

        expect(this.$username.is(document.activeElement)).toBeFalsy();
        expect(this.$email.is(document.activeElement)).toBeTruthy();
        expect($(document.activeElement).attr('name')).toEqual('email');
    });
});

describe('container form option', function() {
    beforeEach(function() {
        $([
            '<form id="containerForm" class="form-horizontal">',
                '<div class="form-group">',
                    '<label class="col-lg-3 control-label">Full name</label>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="firstName" required placeholder="First name" data-fv-notempty-message="The first name is required" />',
                    '</div>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="lastName" required placeholder="Last name" data-fv-notempty-message="The last name is required" />',
                    '</div>',
                '</div>',
                '<div id="errors"></div>',
            '</form>'
        ].join('')).appendTo('body');
    });

    afterEach(function() {
        $('#containerForm').formValidation('destroy').remove();
    });

    it('form container declarative', function() {
        $('#containerForm')
            .attr('data-fv-container', '#errors')
            .formValidation();

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');

        expect($('#errors').find('.help-block').length).toBeGreaterThan(0);

        this.$firstName.val('First');
        this.$lastName.val('');
        this.fv.validate();
        expect($('#errors').find('.help-block:visible[data-fv-for="firstName"]').length).toEqual(0);
        expect($('#errors').find('.help-block:visible[data-fv-for="lastName"]').length).toBeGreaterThan(0);
    });

    it('form container programmatically', function() {
        $('#containerForm').formValidation({
            err: {
                container: '#errors'
            }
        });

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');

        expect($('#errors').find('.help-block').length).toBeGreaterThan(0);

        this.$firstName.val('');
        this.$lastName.val('Last');
        this.fv.validate();
        expect($('#errors').find('.help-block:visible[data-fv-for="firstName"]').length).toBeGreaterThan(0);
        expect($('#errors').find('.help-block:visible[data-fv-for="lastName"]').length).toEqual(0);

        this.fv.resetForm();
        this.$firstName.val('First');
        this.$lastName.val('Last');
        this.fv.validate();
        expect($('#errors').find('.help-block:visible').length).toEqual(0);
    });
});

describe('container field option', function() {
    beforeEach(function() {
        $([
            '<form id="containerForm" class="form-horizontal">',
                '<div class="form-group">',
                    '<label class="col-lg-3 control-label">Full name</label>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="firstName" required placeholder="First name" data-fv-notempty-message="The first name is required" data-fv-container="#firstNameMessage" />',
                        '<span class="help-block" id="firstNameMessage" />',
                    '</div>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="lastName" required placeholder="Last name" data-fv-notempty-message="The last name is required" />',
                        '<span class="help-block lastNameMessage" />',
                    '</div>',
                '</div>',
            '</form>'
        ].join('')).appendTo('body');

        $('#containerForm').formValidation({
            fields: {
                lastName: {
                    err: '.lastNameMessage'
                }
            }
        });

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');
    });

    afterEach(function() {
        $('#containerForm').formValidation('destroy').remove();
    });

    it('field container declarative', function() {
        expect($.trim($('#firstNameMessage').text())).toEqual('The first name is required');
        expect($.trim($('.lastNameMessage').text())).toEqual('The last name is required');
    });

    it('field container programmatically', function() {
        this.$firstName.val('First');
        this.$lastName.val('');
        this.fv.validate();
        expect($('#firstNameMessage').find('.help-block:visible').length).toEqual(0);
        expect($('.lastNameMessage').find('.help-block:visible').length).toBeGreaterThan(0);

        this.fv.resetForm();
        this.$firstName.val('');
        this.$lastName.val('Last');
        this.fv.validate();
        expect($('#firstNameMessage').find('.help-block:visible').length).toBeGreaterThan(0);
        expect($('.lastNameMessage').find('.help-block:visible').length).toEqual(0);
    });
});

describe('container tooltip/popover', function() {
    beforeEach(function() {
        $([
            '<form id="containerForm" class="form-horizontal">',
                '<div class="form-group">',
                    '<label class="col-lg-3 control-label">Full name</label>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="firstName" required placeholder="First name" data-fv-notempty-message="The first name is required" />',
                    '</div>',
                    '<div class="col-lg-4">',
                        '<input type="text" class="form-control" name="lastName" required placeholder="Last name" data-fv-notempty-message="The last name is required" />',
                    '</div>',
                '</div>',
                '<div id="errors"></div>',
            '</form>'
        ].join('')).appendTo('body');
    });

    afterEach(function() {
        $('#containerForm').formValidation('destroy').remove();
    });

    it('container declarative', function() {
        $('#containerForm')
            .attr('data-fv-container', 'tooltip')
            .find('[name="lastName"]')
                .attr('data-fv-container', 'popover')
                .end()
            .formValidation({
                icon: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                }
            });

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');

        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeDefined();
        expect(this.$firstName.parent().find('i').data('bs.tooltip').type).toEqual('tooltip');
        expect(this.$lastName.parent().find('i').data('bs.popover')).toBeDefined();
        expect(this.$lastName.parent().find('i').data('bs.popover').type).toEqual('popover');

        this.fv.resetForm();
        this.$firstName.val('First');
        this.$lastName.val('Last');
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeUndefined();
        expect(this.$lastName.parent().find('i').data('bs.popover')).toBeUndefined();
    });

    it('container programmatically', function() {
        $('#containerForm').formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            err: {
                container: 'tooltip'
            },
            fields: {
                lastName: {
                    err: 'popover'
                }
            }
        });

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');

        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeDefined();
        expect(this.$firstName.parent().find('i').data('bs.tooltip').type).toEqual('tooltip');
        expect(this.$lastName.parent().find('i').data('bs.popover')).toBeDefined();
        expect(this.$lastName.parent().find('i').data('bs.popover').type).toEqual('popover');

        this.fv.resetForm();
        this.$firstName.val('First');
        this.$lastName.val('Last');
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeUndefined();
        expect(this.$lastName.parent().find('i').data('bs.popover')).toBeUndefined();
    });

    // #991: Validate once when setting trigger: blur, container: tooltip
    it('trigger: blur, container: tooltip', function() {
        $('#containerForm').formValidation({
            icon: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            err: {
                container: 'tooltip'
            },
            trigger: 'blur',
            fields: {
                firstName: {
                    validators: {
                        stringLength: {
                            min: 5,
                            message: 'The first name must be more than 5 characters'
                        },
                        notEmpty: {
                            message: 'The first name is required'
                        },
                        regexp: {
                            regexp: /^[a-z]+$/i,
                            message: 'The first name must consist of a-z, A-Z characters only'
                        }
                    }
                },
                lastName: {
                    validators: {
                        stringLength: {
                            min: 5,
                            message: 'The last name must be more than 5 characters'
                        },
                        notEmpty: {
                            message: 'The last name is required'
                        },
                        regexp: {
                            regexp: /^[a-z]+$/i,
                            message: 'The last name must consist of a-z, A-Z characters only'
                        }
                    }
                }
            }
        });

        this.fv         = $('#containerForm').data('formValidation');
        this.$firstName = this.fv.getFieldElements('firstName');
        this.$lastName  = this.fv.getFieldElements('lastName');

        this.$firstName.val('').trigger('blur');
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeDefined();
        expect(this.$firstName.parent().find('i').data('bs.tooltip').type).toEqual('tooltip');
        expect(this.$firstName.parent().find('i').data('bs.tooltip').getTitle()).toEqual('The first name is required');

        this.fv.resetForm();
        this.$firstName.val('@not#valid');
        this.$lastName.val('').focus();
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeDefined();
        expect(this.$firstName.parent().find('i').data('bs.tooltip').type).toEqual('tooltip');
        expect(this.$firstName.parent().find('i').data('bs.tooltip').getTitle()).toEqual('The first name must consist of a-z, A-Z characters only');

        this.fv.resetForm();
        this.$firstName.val('Phuo');
        this.$lastName.val('').focus();
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeDefined();
        expect(this.$firstName.parent().find('i').data('bs.tooltip').type).toEqual('tooltip');
        expect(this.$firstName.parent().find('i').data('bs.tooltip').getTitle()).toEqual('The first name must be more than 5 characters');

        this.fv.resetForm();
        this.$firstName.val('Phuoc');
        this.$lastName.val('').focus();
        this.fv.validate();
        expect(this.$firstName.parent().find('i').data('bs.tooltip')).toBeUndefined();
    });
});

describe('dynamic fields', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="dynamicForm">',
                '<div class="form-group">',
                    '<input type="text" name="userName" class="form-control" required />',
                '</div>',
                '<div class="form-group">',
                    '<input type="text" name="fullName" class="form-control" />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#dynamicForm').formValidation({
            fields: {
                userName: {
                    validators: {
                        notEmpty: {
                            message: 'The user name is required and cannot be empty'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z]+$/,
                            message: 'The user name can only consist of alphabetical, number'
                        }
                    }
                },
                // #725: Note that the email field isn't available in the form yet
                email: {
                    validators: {
                        emailAddress: {
                            message: 'The email address is not valid'
                        }
                    }
                }
            }
        });

        this.fv        = $('#dynamicForm').data('formValidation');
        this.$userName = this.fv.getFieldElements('userName');
    });

    afterEach(function() {
        $('#dynamicForm').formValidation('destroy').remove();
    });

    // https://github.com/formvalidation/formvalidation/pull/725
    it('adding field [does not exist but is already set in "fields" option]', function() {
        var $div   = $('<div/>').addClass('form-group').appendTo($('#dynamicForm'));
            $email = $('<input/>')
                        .attr('type', 'text')
                        .addClass('form-control')
                        .attr('name', 'email')
                        .appendTo($div);

        this.fv.addField('email');

        this.$userName.val('FormValidation');

        $email.val('not valid@email');
        this.fv.validate();
        expect(this.fv.isValidField('email')).toBeFalsy();
        expect(this.fv.isValid()).toBeFalsy();

        this.fv.resetForm();
        $email.val('valid@email.com');
        this.fv.validate();
        expect(this.fv.isValidField('email')).toBeTruthy();
        expect(this.fv.isValid()).toBeTruthy();
    });

    // support#48
    it('Override the options when adding field', function() {
        var options = {
            validators: {
                stringLength: {
                    min: 6,
                    max: 20
                }
            }
        };

        $('#dynamicForm')
            .formValidation('destroy')
            .formValidation()
            .formValidation('addField', 'userName', options);

        // The options shouldn't contain the notEmpty validator (userName field have required attribute)
        expect(options.validators.notEmpty).toBeUndefined();
    })
});

describe('enable validators', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="enableForm">',
                '<div class="form-group">',
                    '<input type="text" name="fullName" class="form-control" />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#enableForm').formValidation({
            fields: {
                fullName: {
                    validators: {
                        notEmpty: {
                            message: 'The full name is required and cannot be empty'
                        },
                        stringLength: {
                            min: 8,
                            max: 40,
                            message: 'The full name must be more than %s and less than %s characters long'
                        },
                        regexp: {
                            enabled: false,
                            regexp: /^[a-zA-Z\s]+$/,
                            message: 'The full name can only consist of alphabetical, number, and space'
                        }
                    }
                }
            }
        });

        this.fv        = $('#enableForm').data('formValidation');
        this.$fullName = this.fv.getFieldElements('fullName');
    });

    afterEach(function() {
        $('#enableForm').formValidation('destroy').remove();
    });

    it('enable all validators', function() {
        this.$fullName.val('@ $full N@m3');
        this.fv.validate();
        expect(this.fv.isValid()).toBeTruthy();

        this.fv.resetForm();
        this.$fullName.val('Contain#$@');
        this.fv.enableFieldValidators('fullName', true);
        this.fv.validate();
        expect(this.fv.isValidField('fullName')).toEqual(false);
        expect(this.fv.isValid()).toEqual(false);
    });

    it('disable all validators', function() {
        this.fv.resetForm();
        this.fv.enableFieldValidators('fullName', false);
        this.fv.validate();
        expect(this.fv.isValid()).toBeTruthy();
    });

    it('enabled option particular validator', function() {
        this.$fullName.val('Contain@#$');
        this.fv.validate();
        expect(this.fv.isValid()).toBeTruthy();

        var messages = this.fv.getMessages('fullName');
        expect(messages.length).toEqual(0);
    });

    it('enable particular validators', function() {
        // Enable stringLength validator
        this.fv.resetForm();
        this.fv.enableFieldValidators('fullName', true, 'stringLength');
        this.fv.enableFieldValidators('fullName', true, 'regexp');
        this.$fullName.val('Full@');
        this.fv.validate();
        expect(this.fv.isValid()).toEqual(false);

        var messages = this.fv.getMessages('fullName');
        expect($.inArray('The full name must be more than 8 and less than 40 characters long', messages)).toBeGreaterThan(-1);
        expect($.inArray('The full name can only consist of alphabetical, number, and space', messages)).toBeGreaterThan(-1);
    });

    it('disable particular validators', function() {
        // Disable stringLength validator
        this.fv.enableFieldValidators('fullName', false, 'stringLength');
        this.$fullName.val('Full');
        this.fv.validate();
        expect(this.fv.isValid()).toBeTruthy();

        var messages = this.fv.getMessages('fullName');
        expect($.inArray('The full name must be more than 8 and less than 40 characters long', messages)).toEqual(-1);

        // Disable regexp validator
        this.fv.enableFieldValidators('fullName', false, 'regexp');
        this.$fullName.val('Special@#$');
        this.fv.validate();
        expect(this.fv.isValid()).toBeTruthy();

        var messages = this.fv.getMessages('fullName');
        expect($.inArray('The full name can only consist of alphabetical, number, and space', messages)).toEqual(-1);
    });
});

TestSuite = $.extend({}, TestSuite, {
    Event: {
        onEmailValid: function(e, data) {
            $('#msg').html('TestSuite.Event.onEmailValid() called, ' + data.field + ' is valid');
        },

        onEmailInvalid: function(e, data) {
            $('#msg').html('TestSuite.Event.onEmailInvalid() called, ' + data.field + ' is invalid');
        },

        onEmailStatus: function(e, data) {
            $('#status').html('TestSuite.Event.onEmailStatus() called; status = ' + data.status);
        },

        onFormValid: function(e) {
            $('#msg').html('TestSuite.Event.onFormValid() called, form ' + $(e.target).attr('id') + ' is valid');
        },

        onFormInvalid: function(e) {
            $('#msg').html('TestSuite.Event.onFormInvalid() called, form ' + $(e.target).attr('id') + ' is invalid');
        }
    }
});

// ---
// Form events
// ---

function onFormValid(e) {
    $('#msg').html('form ' + $(e.target).attr('id') + ' is valid');
};

function onFormInvalid(e) {
    $('#msg').html('form ' + $(e.target).attr('id') + ' is invalid');
};

describe('event form attribute callback global', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm" data-fv-onsuccess="onFormValid" data-fv-onerror="onFormInvalid" >',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" required data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation();

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call data-fv-onsuccess', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm is valid');
    });

    it('call data-fv-onerror', function() {
        this.$email.val('a@b@c@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm is invalid');
    });
});

describe('event form attribute callback namespace', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm" data-fv-onsuccess="TestSuite.Event.onFormValid" data-fv-onerror="TestSuite.Event.onFormInvalid" >',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" required data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation();

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call data-fv-onsuccess', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('TestSuite.Event.onFormValid() called, form eventForm is valid');
    });

    it('call data-fv-onerror', function() {
        this.$email.val('just"not"right@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('TestSuite.Event.onFormInvalid() called, form eventForm is invalid');
    });
});

describe('event form trigger', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm')
            .formValidation()
            .on('success.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered success.form.fv event');
            })
            .on('err.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered err.form.fv event');
            });

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('trigger success.form.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm triggered success.form.fv event');
    });

    it('trigger err.form.fv', function() {
        this.$email.val('this is"not\\allowed@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm triggered err.form.fv event');
    });
});

describe('event form programmatically', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation({
            onSuccess: function(e) {
                $('#msg').html('onSuccess() called');
            },
            onError: function(e) {
                $('#msg').html('onError() called');
            }
        });

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call onSuccess()', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('onSuccess() called');
    });

    it('call onError()', function() {
        this.$email.val('Abc.example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('onError() called');
    });
});

// ---
// Field events
// ---

function onEmailValid(e, data) {
    $('#msg').html(data.field + ' is valid');
};

function onEmailInvalid(e, data) {
    $('#msg').html(data.field + ' is invalid');
};

function onEmailStatus(e, data) {
    $('#status').html(data.status);
};

describe('event field attribute callback global', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div id="status"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress data-fv-onsuccess="onEmailValid" data-fv-onerror="onEmailInvalid" data-fv-onstatus="onEmailStatus" />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation();

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call data-fv-onsuccess', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('email is valid');
        expect($('#status').html()).toEqual(this.fv.STATUS_VALID);
    });

    it('call data-fv-onerror', function() {
        this.$email.val('A@b@c@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('email is invalid');
        expect($('#status').html()).toEqual(this.fv.STATUS_INVALID);
    });
});

describe('event field attribute callback namespace', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div id="status"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress data-fv-onsuccess="TestSuite.Event.onEmailValid" data-fv-onerror="TestSuite.Event.onEmailInvalid" data-fv-onstatus="TestSuite.Event.onEmailStatus" />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation();

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call data-fv-onsuccess', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('TestSuite.Event.onEmailValid() called, email is valid');
        expect($('#status').html()).toEqual('TestSuite.Event.onEmailStatus() called; status = ' + this.fv.STATUS_VALID);
    });

    it('call data-fv-onerror', function() {
        this.$email.val('a"b(c)d,e:f;gi[j\\k]l@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('TestSuite.Event.onEmailInvalid() called, email is invalid');
        expect($('#status').html()).toEqual('TestSuite.Event.onEmailStatus() called; status = ' + this.fv.STATUS_INVALID);
    });
});

describe('event field trigger', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm')
            .formValidation()
            .on('success.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered success.field.fv on ' + data.field);
            })
            .on('err.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered err.field.fv on ' + data.field);
            });

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('trigger success.field.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered success.field.fv on email');
    });

    it('trigger err.field.fv', function() {
        this.$email.val('just"not"right@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered err.field.fv on email');
    });
});

describe('event field programmatically', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm').formValidation({
            fields: {
                email: {
                    onSuccess: function(e, data) {
                        $('#msg').html('onSuccess() called');
                    },
                    onError: function(e, data) {
                        $('#msg').html('onError() called');
                    }
                }
            }
        });

        this.fv     = $('#eventForm').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm').formValidation('destroy').remove();
    });

    it('call onSuccess()', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('onSuccess() called');
    });

    it('call onError()', function() {
        this.$email.val('this is"not\\allowed@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('onError() called');
    });
});

// ---
// Modifying default events
// ---

describe('event form trigger with default events', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm1">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm1')
            .formValidation()
            .on('fv.form.success', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered fv.form.success event');
            })
            .on('success.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered success.form.fv event');
            })
            .on('fv.form.error', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered fv.form.error event');
            })
            .on('err.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered err.form.fv event');
            });

        this.fv     = $('#eventForm1').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm1').formValidation('destroy').remove();
    });

    it('does not trigger fv.form.success', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('form eventForm1 triggered fv.form.success event');
    });

    it('triggers success.form.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm1 triggered success.form.fv event');
    });

    it('does not trigger fv.form.error', function() {
        this.$email.val('A@b@c@example.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('form eventForm1 triggered fv.form.error event');
    });

    it('triggers err.form.fv', function() {
        this.$email.val('A@b@c@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm1 triggered err.form.fv event');
    });
});

describe('event field trigger with default events', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm3">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm3')
            .formValidation()
            .on('success.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered success.field.fv on ' + data.field);
            })
            .on('err.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered err.field.fv on ' + data.field);
            })
            .on('fv.field.success', '[name="email"]', function(e, data) {
                $('#msg').html('triggered fv.field.success on ' + data.field);
            })
            .on('fv.field.error', '[name="email"]', function(e, data) {
                $('#msg').html('triggered fv.field.error on ' + data.field);
            });

        this.fv     = $('#eventForm3').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm3').formValidation('destroy').remove();
    });

    it('triggers success.field.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered success.field.fv on email');
    });

    it('does not trigger fv.field.success', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('triggered fv.field.success on email');
    });

    it('does not trigger err.field.fv', function() {
        this.$email.val('just"not"right@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered err.field.fv on email');
    });

    it('triggers fv.field.error', function() {
        this.$email.val('just"not"right@example.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('triggered fv.field.error on email');
    });
});

describe('event form trigger with events changed', function() {
    var defaultOptions = $.fn.formValidation.DEFAULT_OPTIONS;

    beforeEach(function() {
        $.fn.formValidation.DEFAULT_OPTIONS = $.extend({}, $.fn.formValidation.DEFAULT_OPTIONS, {
            events: {
                formInit: 'init.form.fv',
                formError: 'fv.form.error',
                formSuccess: 'fv.form.success',
                fieldAdded: 'added.field.fv',
                fieldRemoved: 'removed.field.fv',
                fieldInit: 'init.field.fv',
                fieldError: 'fv.field.error',
                fieldSuccess: 'fv.field.success',
                fieldStatus: 'status.field.fv',
                validatorError: 'fv.validator.error',
                validatorSuccess: 'success.validator.fv'
            }
        });

        $([
            '<form class="form-horizontal" id="eventForm2">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm2')
            .formValidation()
            .on('fv.form.success', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered fv.form.success event');
            })
            .on('success.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered success.form.fv event');
            })
            .on('fv.form.error', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered fv.form.error event');
            })
            .on('err.form.fv', function(e) {
                $('#msg').html('form ' + $(e.target).attr('id') + ' triggered err.form.fv event');
            });

        this.fv     = $('#eventForm2').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm2').formValidation('destroy').remove();
        $.fn.formValidation.DEFAULT_OPTIONS = defaultOptions;
    });

    it('triggers fv.form.success', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm2 triggered fv.form.success event');
    });

    it('does not trigger success.form.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('form eventForm2 triggered success.form.fv event');
    });

    it('triggers fv.form.error', function() {
        spyOn(window, 'onerror');

        this.$email.val('this is"not\\allowed@example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('form eventForm2 triggered fv.form.error event');

        expect(window.onerror).not.toHaveBeenCalled();
    });
});

describe('event field trigger with events changed', function() {
    var defaultOptions = $.fn.formValidation.DEFAULT_OPTIONS;

    beforeEach(function() {
        $.fn.formValidation.DEFAULT_OPTIONS = $.extend({}, $.fn.formValidation.DEFAULT_OPTIONS, {
            events: {
                formInit: 'init.form.fv',
                formError: 'fv.form.error',
                formSuccess: 'fv.form.success',
                fieldAdded: 'added.field.fv',
                fieldRemoved: 'removed.field.fv',
                fieldInit: 'init.field.fv',
                fieldError: 'fv.field.error',
                fieldSuccess: 'fv.field.success',
                fieldStatus: 'status.field.fv',
                validatorError: 'fv.validator.error',
                validatorSuccess: 'success.validator.fv'
            }
        });

        $([
            '<form class="form-horizontal" id="eventForm4">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress />',
                '</div>',
            '</form>'
        ].join('\n')).appendTo('body');

        $('#eventForm4')
            .formValidation()
            .on('success.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered success.field.fv on ' + data.field);
            })
            .on('err.field.fv', '[name="email"]', function(e, data) {
                $('#msg').html('triggered err.field.fv on ' + data.field);
            })
            .on('fv.field.success', '[name="email"]', function(e, data) {
                $('#msg').html('triggered fv.field.success on ' + data.field);
            })
            .on('fv.field.error', '[name="email"]', function(e, data) {
                $('#msg').html('triggered fv.field.error on ' + data.field);
            });

        this.fv     = $('#eventForm4').data('formValidation');
        this.$email = this.fv.getFieldElements('email');
    });

    afterEach(function() {
        $('#eventForm4').formValidation('destroy').remove();
        $.fn.formValidation.DEFAULT_OPTIONS = defaultOptions;
    });

    it('triggers success.field.fv', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('triggered success.field.fv on email');
    });

    it('does not trigger fv.field.success', function() {
        this.$email.val('email@domain.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered fv.field.success on email');
    });

    it('does not trigger err.field.fv', function() {
        this.$email.val('Abc.example.com');
        this.fv.validate();
        expect($('#msg').html()).not.toEqual('triggered err.field.fv on email');
    });

    it('triggers fv.field.error', function() {
        spyOn(window, 'onerror');

        this.$email.val('Abc.example.com');
        this.fv.validate();
        expect($('#msg').html()).toEqual('triggered fv.field.error on email');

        expect(window.onerror).not.toHaveBeenCalled();
    });
});

// ---
// Validator events
// ---

function onEmailAddressValidatorSuccess(e, data) {
    $('#msg').html(data.validator + ' validator passed');
};

function onEmailAddressValidatorError(e, data) {
    $('#msg').html(data.validator + ' validator did not pass');
};

describe('event validator declarative', function() {
    beforeEach(function() {
        $([
            '<form class="form-horizontal" id="eventForm">',
                '<div id="msg"></div>',
                '<div class="form-group">',
                    '<input type="text" name="email" data-fv-emailaddress data-fv-emailaddress-onsuccess="onEmailAddressValidatorSuccess" data-fv-emailaddress-onerror="onEmailAddressValidatorError" />',
                '</div