JQuery-Validate dynamically updating rules not working

Question

jquery: 1.9.1 jquery-validate: 1.11.1

I have a user profile page presented to the user. I want to make certain input fields REQUIRED and VALIDATED when the user makes a change to a special field (password or new password). However, the rules only half work and the form is permitted to post. If I force the rules (like for 'fullname' and 'displayname') then they always work. Can I not dynamically update the validation rules? What am I doing wrong?

<script type="text/javascript">
$(document).ready(
    function()
    {
        function updateRules()
        {
            var mLen = $('#passwordnew').val().length;
            if (mLen > 0)
            {
                $('#passwordold').rules('add', {required: true, minlength: 6});
                $('#passwordold').attr('required', 'true');
                $('#passwordnew').rules('add', {required: true, notEqual: '#passwordold'});
                $('#passwordnew').attr('required', 'true');
                $('#passwordconf').rules('add', {required: true, equalTo: '#passwordnew'});
                $('#passwordconf').attr('required', 'true');
            } else {
                $('#passwordold').rules('remove');
                $('#passwordold').attr('required', 'false');
                $('#passwordnew').rules('remove');
                $('#passwordnew').attr('required', 'false');
                $('#passwordconf').rules('remove');
                $('#passwordconf').attr('required', 'false');
            }
        }

        // Change
        $('#passwordold').change(updateRules);
        $('#passwordnew').change(updateRules);

        // Popover
        $('#profile :input').hover(
            function()
            {
                $(this).popover('show')
            },
            function()
            {
                $(this).popover('hide')
            }
        );

        // Validation
        $('#profile').validate(
            {
                rules:
                    {
                        displayname: {required: false, minlength: 2},
                        emailnew: {required: false, email: true},
                        fullname: {required: true, minlength: 5},
                    },
                messages:
                    {
                        displayname:
                            {
                                minlength: "{{ Lang::line( 'user.profile.displayname.validate.minlength' ) -> get() }}",
                            },
                        emailnew:
                            {
                                email: "{{ Lang::line( 'user.profile.emailnew.validate.email' ) -> get() }}"
                            },
                        fullname:
                            {
                                required: "{{ Lang::line( 'user.profile.fullname.validate.required' ) -> get() }}",
                                minlength: "{{ Lang::line( 'user.profile.fullname.validate.minlength' ) -> get() }}",
                            },
                        passwordold:
                            {
                                required: "{{ Lang::line( 'user.profile.passwordold.validate.required' ) -> get() }}",
                                minlength: "{{ Lang::line( 'user.profile.passwordold.validate.minlength' ) -> get() }}",
                            },
                        passwordnew:
                            {
                                required: "{{ Lang::line( 'user.profile.passwordnew.validate.required' ) -> get() }}",
                                minlength: "{{ Lang::line( 'user.profile.passwordnew.validate.minlength' ) -> get() }}",
                                notEqual: "{{ Lang::line( 'user.profile.passwordnew.validate.notequal' ) -> get() }}",
                            },
                        passwordconf:
                            {
                                required: "{{ Lang::line( 'user.profile.passwordconf.validate.required' ) -> get() }}",
                                equalTo: "{{ Lang::line( 'user.profile.passwordconf.validate.equalto' ) -> get() }}"
                            }
                    },
                errorClass: "help-inline",
                errorElement: "span",
                highlight: function(element, errorClass, validClass)
                {
                    $(element).parents('.control-group').addClass('error');
                },
                unhighlight: function(element, errorClass, validClass)
                {
                    $(element).parents('.control-group').removeClass('error');
                    $(element).parents('.control-group').addClass('success');
                }
            }
        );
    }
);
</script>

Sparky Sparky · Accepted Answer · 2013-04-18T18:41:32

.validate() is the initialization for the plugin, which is only supposed to get called once on DOM ready.

$(document).ready(function() {

        // Validation INITIALIZATION
        $('#profile').validate({
            // your options and rules
        });

        function updateRules() {
            // your code
        }

        // Change
        $('#passwordold').change(updateRules);
        $('#passwordnew').change(updateRules);

        // Popover
        $('#profile :input').hover(
            function() {
                $(this).popover('show')
            },
            function() {
                $(this).popover('hide')
            }
        );

});

JQuery-Validate dynamically updating rules not working

1 Answers