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

Question

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

目前，当用户提交时，我收到正确的消息。当我单击该字段，然后退出(焦点)时，我得到“此字段为必填”。我想以某种方式进入验证方法，以便消息保持一致。

这是我正在使用的标记:

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/