Try setting a custom validation message using jQuery Remote

Question

I have a form with the following validation setting:

$('#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 trying to do is use the same validation elements (to work with some other infrastructure) to show both errors and success methods.

My problem is that the success method of my rule runs before the remote check is complete. I tried to customize the message in several ways, but the custom message parameter does not seem to be called on success.

Does anyone know of other methods for using the validation error field for both successful and error messages when using a combination of remote validation rules and a pattern?

Edit:

Now I understand that I was expecting a success event at the wrong time. I need an event that will be fired after verification is complete (not sent). Is there such an event?

Answer 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 parameter can be placed inside the .rules('add') method.

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

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

onfocusout , onkeyup and success are “options” that only enter the .validate() method, which is bound only to the <form> element.

Regarding the "custom" message for remote : According to the docs, this error message will be sent automatically returned from your server ... there is no special setting.

---

EDIT according to comments and updated OP:

Your code:

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

You stated: "However, with the updated code (see above), I never see success events."

You have disabled all events in this form. The only event left to start the scan in this field is when the submit button is pressed. Exactly when do you expect to see success fail?

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

In other words, submit is the only event that can trigger validation when you turn off all other events.

---

EDIT based on another OP update:

"Now I understand that I was expecting a success event at the wrong time. I need an event that will be fired after the check is completed (not Sent). Is there such an event?"

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

success is a callback function. The callback function is what happens when an event occurs.

& bull; If you need a “callback function” that fires every time the field passes the check, you can use success .

& bull; If you need a “callback function” that fires when the form passes validation, you can use submitHandler . However, this is also when the form is submitted.

& bull; If you want to "check" the entire form or a single field to make sure it is 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 starts the test (shows the message) and returns a boolean value.

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

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

Answer 2

Use the remote , dataFilter and messages parameters as follows:

 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 3

I am late to answer this question, but I think this 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 following: $ (Function () {

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

});