Question

我正在使用jQuery Validate插件。我想在提交时一次显示逐个错误消息。为此，我使用errorPlacement回调函数替换目标区域上的消息。

从底部开始的错误消息。因此，在单击“提交”按钮时，最后输入的错误消息将首先出现。

$.validator.setDefaults({
    //onfocusout: true, 
    errorPlacement: function(error, element) {
        $(element).parents('#registorForm').find('.form-message').html(error); 
    },
    invalidHandler: function(form, validator) {

    },
});


$("#registorForm").validate({ 
    ignore: [],
    rules: { 
        user_title:{
            required: true,
        }, 
        first_name: {
            required: true,
            minlength: 3
        },
        middle_name: {
            required: true
        },
        last_name: {
            required: true
        },
        mobile_number:{
            required: true,
            phoneUS: true,
            minlength: 8,
            maxlength: 12,
            digits: true 
        },
        email_id: {
            required: true,
            email: true
        },
        city: {
            required: true,
            minlength: 2
        }
    },
    messages:{
        user_title:{
            required:'Your Title is required E.g. Mr., Miss., Ms.'
        },
        first_name:{
            required:'Please Enter Your First Name'
        },
        middle_name:{
            required:'Please Enter Your Middle Name'
        },
        last_name:{
            required:'Please Enter Your Last Name'
        },
        mobile_number:{
            required:'Please Enter Your Mobile Number'
        },
        email_id:{
            required:'Please Enter Your Email id'
        },
        city:{
            required:'Please Enter Your City'
        },

    } 
});

Find js Fiddle demo here

Answer 1

对回调选项存在一些误解。

errorPlacement选项用于调整每个输入元素附近的所有个别消息的位置。只显示最后一条消息，因为您的代码正在用下一条消息替换每条消息。

您也不需要空invalidHandler，因为该选项用于在表单无效时触发自定义操作。

如果您要将邮件放在其他位置并控制邮件的显示方式，则需要查看其他选项，例如showErrors，errorLabelContainer和errorContainer

使用showErrors选项时，errorPlacement功能将自动被禁止。换句话说，当使用showErrors选项时，您不会在每个元素旁边收到消息。

在showErrors内，使用errorList参数挑选消息并控制它们的显示方式。请勿使用this.defaultShowErrors()，因为它会有效地恢复errorPlacement的功能。

你可以做的一个粗略的例子，但它需要一些工作......

$.validator.setDefaults({
    showErrors: function(errorMap, errorList) {
        var summary = "Your form contains " + this.numberOfInvalids() + " errors, see details above.</br>";

        $.each(errorList, function() {
            summary += " * " + this.message + "</br>";
        });

        $(".form-message").html(summary);

        // this.defaultShowErrors(); // default error placement
    }
});

DEMO：https://jsfiddle.net/p4mw594x/

showErrors 的更多示例：

Jquery验证 - 从上次输入开始的errorPlacement

1 个答案: