jQuery 验证 - 表单顶部和每个元素的错误消息

Question

我正在使用 jquery 验证插件，并且我想将错误放置在无效的表单元素旁边。但是，我还希望在表单顶部列出所有错误。

选项设置似乎只允许您执行其中一项操作，但不能同时执行两项操作。

所以如果有办法设置选项让这种情况发生，那就很容易解决问题了!

<小时/>

为了尝试解决这个问题，我编写了一段 jQuery 来获取错误消息并将它们添加到表单顶部(并将它们链接到错误位置)。但是，当我尝试在 validate 方法中调用此函数(使用 invalidHandler 或 errorPlacement 处理程序)时，一切正常，但表单已提交。我不想提交表单，因为 jQuery 是用来验证客户端的。

我的验证选项如下所示:

$("#memberRegistration").validate({
    invalidHandler: function(form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted'
                    : 'You missed ' + errors + ' fields. They have been highlighted';
            $("div.errorBox span").html(message);
        }
        $("div.errorBox").removeClass('noDisplay');
        errorCopy();                   // <-- my custom function 
    },
    wrapper: "div",
    errorPlacement: function(error, element) {
        element = element.closest('li');
        element = element.children(':first-child');
        error.insertBefore(element);
        error.addClass('message');    
    },
    meta: "validate",
    rules: {
        "memberRegistrationFormDetails.Title": { required: true },

为什么在未提交表单的情况下无法从 invalidHandler 或 errorPlacement 处理程序调用函数？

谢谢!

Answer 1

找到了解决方案。我将相关代码直接添加到 errorPlacement 处理程序中，而不从其他地方调用该函数，并进行了一些修改:

 errorPlacement: function(error, element) {
        element = element.closest('li');
        element = element.children(':first-child');
        error.insertBefore(element);
        error.addClass('message');
        $(function() {                                 // my function
            var errorIndex = $(error).index('div');
            var errorId = 'errordiv' + errorIndex.toString();
            $(error).attr('id', errorId);
            $('.errorList').append('<li><a href="#' + errorId + '">' + $(error).text() + '</a></li>');
        });    
    },

此代码获取错误消息并将其链接添加到表单顶部的 errorList 容器中。