尝试使用jQuery Remote设置自定义验证消息 [英] Try to set custom validation message with jQuery Remote

查看:97
本文介绍了尝试使用jQuery Remote设置自定义验证消息的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

$('#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'));
            }
        }
});

这是在尝试使用相同的验证元素(以便与其他框架配合使用)以显示错误和成功方法.

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

有人同时使用远程验证规则和模式验证规则时,是否有人知道将验证错误字段用于成功消息和错误消息的其他方法?

我现在知道我期望在错误的时间举行成功的活动.验证完成(未提交)后,我需要触发一个事件.有这样的事件吗?

解决方案

您的代码...

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

这里的问题是onfocusoutonkeyupsuccess不是规则".在.rules('add')方法中只能放置单个规则"和messages选项.

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

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

onfocusoutonkeyupsuccess是仅在.validate()方法内部使用的选项",该方法仅附加到<​​c10>元素.

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


根据评论和更新的OP进行

您的代码:

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

您说,仍然使用更新的代码(请参见上文),我从没看到成功事件."

您已禁用此表单上的所有事件.在该字段上唯一触发触发验证的事件是单击提交"按钮时.您确切地是 何时 ?

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

换句话说,submit是在禁用所有其他事件后剩下的唯一触发验证测试的事件.


基于另一个OP更新进行

"我现在知道我在错误的时间期待成功.我 需要验证完成后触发的事件(不是 提交).有这样的事件吗?"

success不是事件". 事件"是clickblurkeyup等.(onkeyuponfocusoutonclick是控制此插件事件的选项)

success是回调函数". 事件发生后,会发生回调函数".

•如果您需要每次字段通过验证时都会触发的回调函数",则可以使用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/

I have the a form with the following validation setup:

$('#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'));
            }
        }
});

What this is attempting to do is use the same validation elements (in order to work with some other framework) to show both errors and success methods.

My problem is that the success method of my rule gets fired BEFORE the remote validation has completed. I tried setting the message several ways but the custom messages parameter doesn't seem to be called on validation success.

Does anyone know of other methods to use the validation error field for both success and error messages when using a mix of both remote and pattern validation rules?

Edit:

I now understand I was expecting a success event at the wrong time. I need an event that is fired once validation has completed (not submitted). Is there any such event?

解决方案

Your code...

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

The problem here is that onfocusout, onkeyup and success are not "rules". Only individual "rules" and the messages option can be placed inside of the .rules('add') method.

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

See documentation for .rules() method: http://jqueryvalidation.org/rules

onfocusout, onkeyup and success are "options" that only go inside of the .validate() method, which is only attached to the <form> element.

As far as a "custom" message for remote: As per the docs, this error message is automatically going to be the message returned from your server... there is no special setup.


EDIT as per comments and updated OP:

Your code:

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

You stated, "Still, with updated code (see above) I never see the success event."

You've disabled all the events on this form. The only event left for triggering validation on this field is when the submit button is clicked. Exactly when do you expect to "see" success fire off?

DEMO: http://jsfiddle.net/xMhvT/

In other words, submit is the only event left to trigger a validation test when you've disabled all the other events.


EDIT based on another OP update:

"I now understand I was expecting a success event at the wrong time. I need an event that is fired once validation has completed (not submitted). Is there any such event?"

success is not an "event". An "event" is a click, blur, keyup, etc. (onkeyup, onfocusout and onclick are options that control the events for this plugin)

success is a "callback function". A "callback function" is what happens upon the event.

• If you need a "callback function" that fires every time a field passes validation, then you can use success.

• If you need a "callback function" that fires when the form passes validation, then you can use submitHandler. However, this is also when the form is submitted.

• If you want to "test" the entire form or a single field to see if it's valid without submitting the form, you can use the .valid() "method".

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

// or

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

// you can also...

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

This method will fire the test (show the message) and return a boolean value.

DEMO: http://jsfiddle.net/xMhvT/1/

See: http://jqueryvalidation.org/valid/

这篇关于尝试使用jQuery Remote设置自定义验证消息的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆