JQuery-验证动态更新规则不起作用

Question

jquery：1.9.1 jquery-validate：1.11.1

我向用户显示了一个用户个人资料页面。我想在用户更改特殊字段（密码或新密码）时使某些输入字段为REQUIRED AND VALIDATED。但是，规则只有一半工作，表格允许发布。 如果我强制执行规则（例如'fullname'和'displayname'），那么它们总能工作。 我可以不动态更新验证规则吗？ 我究竟做错了什么？

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

Answer 1

.validate()是插件的初始化，只能在DOM准备好的情况下调用一次。

$(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')
            }
        );

});