使用 focusout 设置自定义验证器消息

Question

我想显示相同的消息“请输入您的名字”。当用户按下提交以及如果/何时发生 foucusout 事件。

目前，当用户提交时，我会收到正确的消息。当我单击该字段，然后按标签（focusout）时，我得到“此字段是必需的”。我想以某种方式进入验证方法，以便消息是一致的。

这是我正在使用的标记：

HTML：

<input type="text" id="firstName" name="firstName" />

JavaScript：

var messages = {
    'firstNameRequired': "Please enter your first name."
};


$('input[type="text"]').focusout(function(event) {
    $(this).valid();
});

....

function validateForm() {
    $('#myForm').validate({
        'rules': {
            'firstName': {
                'required': true,
                'minlength': 3
            }
        },
        'messages': {
            'firstName': messages.firstNameRequired
        }
        ...
});

// invalid but this is what I'm trying to accomplish:
 $('input[type="text"]').focusout(function(event) {
    $(this).valid({
        // override the default error message...
        'messages': {
            'firstname': messages.firstNameRequired
         }
    });
});

感谢您的宝贵时间！

Answer 1

我已从您的 validateForm() 函数中删除了 .validate() 方法。问题是因为你误解了.validate()的方法。每次您需要验证时都不会调用它...它仅在页面加载时调用一次以初始化表单上的插件。您看到其他消息是因为插件未正确初始化。

您也不需要自定义外部focusout 处理程序。您可以像这样使用内置的onfocusout 回调来实现相同的...

onfocusout: function(element) {
    this.element(element); //< inside 'validate()' method, this is like 'valid()'
},

这样做...

$(document).ready(function () {

    var messages = {
        'firstNameRequired': "Please enter your first name."
    };

    $('#myForm').validate({
        rules: {
            firstName: {
                required: true,
                minlength: 3
            }
        },
        messages: {
            firstName: messages.firstNameRequired
        },
        onfocusout: function(element) {
            this.element(element);
        },
        submitHandler: function(form) {
            alert('form is valid');
            return false;
        }
    });

});

演示：http://jsfiddle.net/JBL48/