jQuery验证不绑定，没有错误

Question

我有一个简单的表单与jQuery 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是正确的，这是我的完整文件，前面的代码是一个示例，忘记关闭ready函数...但不是在我的实际代码中。

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

$(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中创建一个自定义绑定来应用.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;
            }
        });
    }    
};

Answer 2

修复两个丢失的支架拼写错误，验证插件没有任何问题。输入无效的电子邮件地址并查看错误消息。

您的代码：http://jsfiddle.net/wZfHa/

问题显然在你的逻辑中......

    rules: {
        email: {
            required: {  // only required if 'emailConfirm' is filled out
                depends: function (element) {
                    return $("#emailConfirm").is(":filled");
                }
            },
            email: true
        },
        emailConfirm: {
            required: {  // only required if 'email' is filled out
                depends: function (element) {
                    return $("#email").is(":filled");
                }
            },
            email: true,
            equalTo: "#email",
        }
    }

如果第二个字段已填写，则第一个字段仅为required。如果填写第一个字段，则第二个字段仅为required ...因此，如果两个字段均未填写，则不需要任何内容​​，表单将提交，因为它在技术上“有效”。如果这就是你想要的，那么它的工作正常。