Question

我正在使用jquery validate插件，我想在无效表单元素旁边放置错误。但是，我也希望在表单顶部列出所有错误。

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

因此，如果有办法设置选项以便发生这种情况，那么这将很容易解决问题！

为了试图解决这个问题，我编写了一段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容器中。

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

1 个答案: