Prototype validation not working correctly

Question

I use Prototype.js to validate a form. For one of the fields, I have the prototype script ajax a request to a file. The file is a simple PHP file and will return '1' if the value is OK and '0' if the value is not OK. I have the script as below, which should work perfectly. The prototype validation is supposed to show a validation error message when a field does not pass validation, and not display / remove the message once the field passes validation. But in this case, even when the ajax file returns '1', the validation will display the error message anyway. Anyone able to help would be greatly appreciated!

['validate-number3', numessage3, function(v) {
new Ajax.Request('test.php?nr='+v, {
  method:'get',
  onSuccess: function(transport) {
    var response = transport.responseText;
    if(response == '1'){return true;}else{return false};
  }
});
}],

"Doesn't work" is not really a great explanation of what happens... — nico, Sep 17 '13 at 17:18
@nico Sorry about that -- let me clarify: The prototype validation will show a validation error message when a field does not pass validation. But in this case, even when the ajax file returns '1', the validation will display the error message anyway. — David, Sep 17 '13 at 17:20
possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) - you cannot, it is asynchronous. — Bergi, Sep 17 '13 at 17:29

score 0 · Answer 1 · answered Sep 17 '13 at 19:47

the return value from Ajax.Request is the Ajax.Request object and returns as soon as the request is setup - the onsuccess callback is called after the request has been completed - so checking the results of Ajax.Request is not useful for what you want to accomplish.

The reason that this doesn't work as you expect, this is an asynchronous call which means it will start the call and then return control to the script while it is processing and then run the callbacks when it is completed.

Try it this way

new Ajax.Request('test.php?nr='+v, {
  method:'get',
  onSuccess: handleResponse
});

function handleResponse( transport ){
    var response = transport.responseText;
    if(response == '1'){
       //everything is OK 
    }else{
       //value is not OK 
    };
}

score 0 · Answer 2 · answered Sep 18 '13 at 01:44

I was able to solve my question! Thanks to this teriffic page: http://inchoo.net/ecommerce/magento/magento-frontend/magento-form-field-ajax-validation/ it was no problem. This is what I ended up with:

var ok = false;
new Ajax.Request('test.php?nr='+v, {
  method:'get',
  asynchronous: false,
  onSuccess: function(transport) {
    var response = transport.responseText;
    if(response == '1'){ok = true;}else{ok = false;};
  },
  onComplete: function() {
            if ($('advice-validate-number-pay_bank_no')) {
                $('advice-validate-number-pay_bank_no').remove();
            }
  }
});
return ok;

Prototype validation not working correctly

2 Answers2