Try to set custom validation message with jQuery Remote

问题

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?

回答1:

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/

回答2:

Use the remote, dataFilter and messages parameters like this:

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; }
        }
    }
});

回答3:

I am late to answer this question but I think it may help others:

in your php just need to add the following

if($rows_matched==1){
          echo (json_encode(false));
        }
        else{
          echo (json_encode(true));
        }

and in your js code write the followiing: $(function(){

$('#product_add').validate({
rules:{
  product_sku:{
    remote:{
      url:'check.php',
      type:'POST'
    }
  }
},
messages:{
  product_sku:{
    remote:'already in database'
  }
}
});

});

回答4:

dataFilter: function(response) {
                    response = $.parseJSON(response);

                    if (response.status === 'success') return true;
                    else {
                        message = response.error.message;
                        return false;
                    }
                }

来源：https://stackoverflow.com/questions/18492607/try-to-set-custom-validation-message-with-jquery-remote