尝试使用jQuery Remote设置自定义验证消息

Question

我有一个带有以下验证设置的表单:

$('#form').validate({
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            success: function (){
                $('#username').addClass('input-validation-confirmation');
            }
        });
$('#username').rules("add", {
        onfocusout: false,
        onkeyup: false,
        required: true,
        email: true,                    
        remote: {
            url: function,
            type: 'GET',
            dataType: 'json',
            traditional: true,
            data: {
                username: function () {
                    return $('#username').val();
                }
            },
            dataFilter: function (responseString) {
                var response = jQuery.parseJSON(responseString);
                currentMessage = response.Message;
                if (response.State == 0) {
                    currentMessage = currentMessage + 0;
                                return false;
                }
                return 'true';
            },
            beforeSend: function (response) {
                showLoadingIndicator($('#username'));
            },
            complete: function () {
                hideLoadingIndicator($('#username'));
            }
        }
});

这是尝试做的是使用相同的验证元素(为了与其他框架一起工作)来显示错误和成功方法.

我的问题是,在远程验证完成之前,我的规则的成功方法被触发了.我尝试了几种方式设置消息,但似乎没有在验证成功时调用自定义消息参数.

当使用远程和模式验证规则的混合时,有没有人知道在成功和错误消息中使用验证错误字段的其他方法？

编辑:

我现在明白我期待在错误的时间成功举办.我需要一个验证完成后触发的事件(未提交).有没有这样的事件？

Answer 1

使用remote,dataFilter和messages参数如下:

var message = 'Default error message';

$('form').validate({
    rules: {
        element1: {
            remote: {
                url: '/check',
                type: 'post',
                cache: false,
                dataType: 'json',
                data: {
                    element2: function() {
                        return $('.element2').val();
                    }
                },
                dataFilter: function(response) {
                    response = $.parseJSON(response);

                    if (response.status === 'success') return true;
                    else {
                        message = response.error.message;
                        return false;
                    }
                }
            }
        }
    },
    messages: {
        element1: {
            remote: function(){ return message; }
        }
    }
});

Answer 2

你的代码......

$('#username').rules("add", {
    onfocusout: false,
    onkeyup: false,
    required: true,
    email: true,                    
    remote: { ... },
    messages: { ... },
    success: function (label) { ... }
});

这里的问题是onfocusout,onkeyup并success没有"规矩".只有单个"规则"和messages选项可以放在.rules('add')方法内部.

$('#username').rules("add", {
    required: true,
    email: true,                    
    remote: { ... },
    messages: { 
        remote: "custom remote message"
    }
});

请参阅.rules()方法文档:http: //jqueryvalidation.org/rules

onfocusout,onkeyup并且success是仅在.validate()方法内部的"选项" ,其仅附加到<form>元素.

至于"自定义"消息remote: 根据文档,此错误消息将自动成为从您的服务器返回的消息...没有特殊设置.

根据评论和更新的OP编辑:

你的代码:

$('#form').validate({
        onfocusout: false,
        onkeyup: false,
        onclick: false,
        success: function (){
            $('#username').addClass('input-validation-confirmation');
        }
});

你说, "尽管如此,有了更新的代码(见上文),我从未见过成功事件."

您已禁用此表单上的所有活动.触发此字段验证的唯一事件是单击提交按钮.究竟什么时候你会"看到" success火了？

演示:http: //jsfiddle.net/xMhvT/

换句话说,submit当您禁用所有其他事件时,唯一的事件是触发验证测试.

编辑基于另一个OP更新:

"我现在明白我期待在错误的时间成功举办.我需要一个在验证完成后被解雇的事件(未提交).是否有这样的事件？"

success不是"事件"."事件"是click,blur,keyup等(onkeyup,onfocusout并onclick控制该插件的事件选项)

success是一个"回调函数".A"回调函数"是什么情况时该事件.

•如果您需要每次字段通过验证时触发的"回调函数",则可以使用success.

•如果您需要在表单通过验证时触发的"回调函数",则可以使用submitHandler.但是,这也是在提交表单时.

•如果要"测试"整个表单或单个字段以查看它是否有效而不提交表单,则可以使用.valid()"方法".

$('#username').valid();  // for one field

// or

$('#form').valid();  // for the whole form

// you can also...

if ($('#form').valid()) {
   //do something if form is valid
}

此方法将触发测试(显示消息)并返回布尔值.

演示:http: //jsfiddle.net/xMhvT/1/

请参阅:http://jqueryvalidation.org/valid/