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

Question

我正在使用 jQuery 验证插件。我想在提交时一次显示一个错误消息。为此，我使用了 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, and 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
    }
});

演示：https://jsfiddle.net/p4mw594x/

showErrors的更多例子：

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

Jquery validate - errorPlacement starting from last input

jquery

jquery-validate