使用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

我已经.validate()从你的validateForm()函数中删除了该方法.问题是由于您误解了该.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/