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

Toggling validators in a master page

In some cases, you might want to validate given fields while ignoring validation on other one. Let's look at the following particular case:

The signing in form defines validator rules for the username and password fields
There's also a modal that allows user to enter the email address in case he wants to reset the password

The main form and modal have separated submit buttons.

Clicking the Submit button in the main form only validates the username/password fields
And vice versa, clicking the Submit button in the modal will trigger the validations on the email field only

The requirement above can be easily implemented if we put the main form and modal into separated forms. By doing that, clicking the Submit button in each form doesn't effect to the validations of the other one. The problem is solved.

But, what if the page always has only one form, such as the master page from ASP.Net.

This example shows you a way to solve this again by using two powerful features of FormValidation:

Initially, all the validators of email field are disabled via the enabled option
When showing the modal, we can turn them on via the enableFieldValidators() method. Also, they are turned off when closing the modal.

The Bootstrap modal provides shown.bs.modal and hidden.bs.modal event that are triggered after showing/hiding a modal. That are the places where we can toggle the field validations.

$('#forgotPasswordModal')
    // Called after showing the modal
    .on('shown.bs.modal', function() {
        $('#signinForm')
            // Disable the validators of username/password fields
            .formValidation('enableFieldValidators', 'username', false)
            .formValidation('enableFieldValidators', 'password', false)

            // Enable the validators of email field
            .formValidation('enableFieldValidators', 'email', true)
            .formValidation('resetField', 'email');
    })

    // Called after hiding the modal
    .on('hidden.bs.modal', function() {
        $('#signinForm')
            // Enable the validators of username/password fields
            .formValidation('enableFieldValidators', 'username', true)
            .formValidation('enableFieldValidators', 'password', true)

            // Disable the validators of email field
            .formValidation('enableFieldValidators', 'email', false);
    });

You can take a look at the Programmatic code tab to see the full working code.

Try it
Programmatic code

Username

Password

<form id="signinForm" method="post" class="form-horizontal">
    <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" />
        </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" />
        </div>
        <div class="col-xs-3">
            <button class="btn btn-info btn-sm" type="button" data-toggle="modal" data-target="#forgotPasswordModal">Forgot password</button>
        </div>
    </div>

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

    <!-- The modal contains the email field -->
    <div class="modal fade" id="forgotPasswordModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h5 class="modal-title">Forgot password</h5>
                </div>

                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-xs-3 control-label">Email address</label>
                        <div class="col-xs-6">
                            <input type="text" class="form-control" name="email" />
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-xs-5 col-xs-offset-3">
                            <button type="submit" class="btn btn-primary">Reset password</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
$(document).ready(function() {
    $('#signinForm').formValidation({
        framework: 'bootstrap',
        excluded: ':disabled',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                validators: {
                    notEmpty: {
                        message: 'The username is required and cannot be empty'
                    }
                }
            },
            password: {
                validators: {
                    notEmpty: {
                        message: 'The password is required and cannot be empty'
                    }
                }
            },
            email: {
                /* Initially, the validators of this field are disabled */
                enabled: false,
                validators: {
                    notEmpty: {
                        message: 'The email address is required and cannot be empty'
                    },
                    emailAddress: {
                        message: 'The email address is not valid'
                    }
                }
            }
        }
    });

    $('#forgotPasswordModal')
        .on('shown.bs.modal', function() {
            $('#signinForm')
                .formValidation('enableFieldValidators', 'username', false)
                .formValidation('enableFieldValidators', 'password', false)
                .formValidation('enableFieldValidators', 'email', true)
                .formValidation('resetField', 'email');
        })
        .on('hidden.bs.modal', function() {
            $('#signinForm')
                .formValidation('enableFieldValidators', 'username', true)
                .formValidation('enableFieldValidators', 'password', true)
                .formValidation('enableFieldValidators', 'email', false);
        });
});
</script>

Toggling validators in a master page

Related ejemplos