淘汰jQuery验证绑定处理程序

Knockout jQuery Validate binding Handler

本文关键字：处理程序绑定验证 jQuery 淘汰更新时间：2023-09-26

我试图使用Knockout和jQuery Validate的绑定处理程序，但当我提交表单时，页面会重新加载，不会验证，也不会在视图模型上调用该方法。

有人能告诉我我缺了什么吗？

这是我的绑定

 ko.bindingHandlers.validateEmailForm = {
        update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {      
            $(element).validate({
                errorLabelContainer: $("#updateEmailFormAlert"),
                wrapper: 'li',
                rules: {
                    email: {
                        required: true,                        
                        email: true
                    },
                    emailConfirm: {                                                
                        email: true,
                        equalTo: "#email",                    
                    }
                },
                messages: {
                    email: {
                        required: "Email is required",
                        email: "Please enter a valid email address"
                    },
                    emailConfirm: {
                        required: "Confirm Email is required",
                        email: "Please enter a valid confirm email address",
                        equalTo: "Confirm Email must match Email"
                    }
                },
                submitHandler: function() {
                    viewModel.updateUserEmail();
                }
            });
        }    
    };

好的，所以我所要做的就是在创建ViewModel实例时创建一个变量，这样我就可以引用ViewModel中的函数。

var userViewModel = new UsersViewModel();
ko.applyBindings(userViewModel);

然后在我的submitHandler 中

  // activate the jQuery Validate on the form
     ko.bindingHandlers.validateEmailForm = {
        update: function(element, valueAccessor, allBindingsAccessor, data, bindingContext) {      
            $(element).validate({
                errorLabelContainer: $("#updateEmailFormAlert"),
                wrapper: 'li',
                rules: {
                    email: {
                        required: true,                        
                        email: true
                    },
                    emailConfirm: {                                                
                        email: true,  
                        equalTo: "#email",                    
                    }
                },
                messages: {
                    email: {
                        required: "Email is required",
                        email: "Please enter a valid email address"
                    },
                    emailConfirm: {
                        required: "Confirm Email is required",
                        email: "Please enter a valid confirm email address",
                        equalTo: "Confirm Email must match Email"
                    }
                },
                submitHandler: function() {
                    userViewModel.updateUserEmail(data);
                    return false;
                }
            });
        }    
    };