javascript - jQuery Validate 没有绑定(bind)，没有错误

Question

我有一个带有 jQ​​uery Validate 的简单表单，我已经初始化了 jQuery Validate 插件并设置了我的规则和消息，但由于某种原因它仍在触发表单提交并刷新页面，而不验证表单。

我在另一个表单上设置了相同的规则，并且有效。我需要它来验证和触发提交处理程序，但不确定我做错了什么。

包含的 Javascripts

   <script src="/js/jquery/jquery.js"></script>
   <!-- jQuery Validate -->
   <script src='/js/jquery/jquery.validate.min.js'></script>
   <script src='/js/jquery/additional-methods.min.js'></script>

HTML

 <ul id="updateEmailFormAlert" class="alert alert-danger">
 </ul> 

  <form id="updateEmailForm" role="form" class="form">
     <div class="col-md-5"><input type="text" id="email" name="email" class="form-control" placeholder="Email Address"/></div>
     <div class="col-md-5"><input type="text" id="emailConfirm" name="emailConfirm" class="form-control" placeholder="Confirm Email Address"/></div>
     <div class="col-md-2"><button type="submit" class="btn btn-primary btn-sm center form-btn">Update Email</button></div>
  </form>

Javascript

$(document).ready() {
   validateUpdateEmailForm();
}
var updateEmailValidator = null;
function validateUpdateEmailForm() {
    updateEmailValidator = $("#updateEmailForm").validate({
        errorLabelContainer: $("#updateEmailFormAlert"),
        wrapper: 'li',
        rules: {
            email: {
                required: {
                    depends: function(element) {
                        return $("#emailConfirm").is(":filled");
                    }
                },
                email: true
            },
            emailConfirm: {
                required: {
                    depends: function(element) {
                        return $("#email").is(":filled");
                    }
                },
                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() {

            return false;
        }
});

编辑

我的 javascript 是正确的，这是我的完整文件，前面的代码是一个例子，忘记关闭就绪功能......但在我的实际代码中没有。

/** * 在 Knockout UI 中管理用户模型和 View 模型。 */

$(document).ready(function() {

     // setup jquery validate on the update email form
    validateUpdateEmailForm();

    // setup knockout bindings
    ko.applyBindings(new UsersViewModel());

     // highlight the selected nav
    $("#nav-users").addClass('active');   
});

// user model
var User = function(user) {
    var self = this;

    self.id              = ko.observable(user.id);
    self.username        = ko.observable(user.username);
    self.date_created    = ko.observable(user.date_created);
    self.active          = ko.observable(user.active);
    self.last_login      = ko.observable(user.last_login);
    self.role            = ko.observable(user.role);
    self.profile_id      = ko.observable(user.profile_id);
    self.first_name      = ko.observable(user.first_name);
    self.last_name       = ko.observable(user.last_name);
    self.email           = ko.observable(user.email);
    self.avatar          = ko.observable(user.avatar);
    self.on_mailing_list = ko.observable(user.on_mailing_list);
    self.requests        = ko.observable(user.requests);

    self.name = ko.computed(function() {
       return user.first_name + " " + user.last_name;
    });

    self.joined = ko.computed(function() {
        return timeSince(new Date(user.date_created));
    });

    self.joinedOn = ko.computed(function() {
        var jsDate = new Date(user.date_created);
        var formattedDate = jsDate.getMonth() + "/" + jsDate.getDate() + "/" + jsDate.getFullYear();
        return formattedDate;
    });

    self.lastLogin = ko.computed(function() {
        var jsDate = new Date(user.last_login);
        var formattedDate = jsDate.getMonth() + "/" + jsDate.getDate() + "/" + jsDate.getFullYear();
        return jsDate.getFullYear() == "1969" ? "Never" : formattedDate;
    });

    self.onMailingList = ko.computed(function() {
        return user.on_mailing_list == 1 ? 'fa-envelope' : '';
    });

    self.status = ko.computed(function() {
        return user.active == 1 ? 'fa-check green-accent' : 'fa-exclamation-circle red-accent';
    });

    self.statusText = ko.computed(function() {
        return user.active == 1 ? "Active" : "Inactive";
    });

    self.isSubscriber = ko.computed(function() {
        return user.on_mailing_list == 1 ? "Yes" : "No";
    });

    self.roleTag = ko.computed(function() {
        return user.role == 'member' ? 'member-tag' : 'admin-tag';
    });    

    self.isSelected = ko.computed(function() {
        return false;
    }, this);
}

// users view model
var UsersViewModel = function() {
    var self = this;

    self.users        = ko.observableArray();
    self.selectedUser = ko.observable();

    // select the first item
    self.selectedUser(self.users()[0]);

    // load initial data
    $.getJSON('/admin/users/getusers', {}, function(users) {
        var mappedUsers = $.map(users, function(user) {
            return new User(user);
        });
        self.users(mappedUsers);

        // select the first restaurant
        $("#ghost-list li:first").trigger('click');
    });


    self.addUser = function() {

    };

    self.removeUser = function() {

    };

    self.filter = function(field, sortOrder) {
        $.getJSON('/admin/users/filter', {field: field, sortOrder: sortOrder}, function(users) {
            var mappedUsers = $.map(users, function(user) {
                return new User(user);
            });
            self.users(mappedUsers);
        })
    };
}

var updateEmailValidator = null;
function validateUpdateEmailForm() {
    updateEmailValidator = $("#updateEmailForm").validate({
        errorLabelContainer: $("#updateEmailFormAlert"),
        wrapper: 'li',
        rules: {
            email: {
                required: {
                    depends: function(element) {
                        return $("#emailConfirm").is(":filled");
                    }
                },
                email: true
            },
            emailConfirm: {
                required: {
                    depends: function(element) {
                        return $("#email").is(":filled");
                    }
                },
                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() {

            return false;
        }
    });
}
function validateResetPasswordForm() {

}

Answer 1

好的，看起来我只需要在 Knockout js 中创建一个自定义绑定(bind)来应用 .validate()。

 // activate the jQuery Validate on the form
 ko.bindingHandlers.validateEmailForm = {
    update: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {      
        $(element).validate({
            errorLabelContainer: $("#updateEmailFormAlert"),
            wrapper: 'li',
            rules: {
                email: {
                    required: {
                        depends: function(element) {
                            return $("#emailConfirm").is(":filled");
                        }
                    },
                    email: true
                },
                emailConfirm: {
                    required: {
                        depends: function(element) {
                            return $("#email").is(":filled");
                        }
                    },
                    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() {

                return false;
            }
        });
    }    
};