Question

Here’s what I’m trying to do.

• When the ‘Submit’ form is clicked on my form, a javascript function will loop through all the fields of the form.

• For each field a function will be called which would return true/false to indicate if it was filled in correctly or not.

• If a false is returned, it shows an error message next to that field.

• If all fields are correct, it submits the form. If not, it doesn’t submit.

Here’s the tricky part. While most of the validation is being done via javascript, the username and email need to be validated via ajax to see if the username/email is already in use or not.

The structure i’m currently using for this ajax function is something similar to this:

function validateSomething() {   var valid;   $.post('something.php', {x:y},   function(data)   {      if (isSomething(data))        valid=true;         //Here referring to the valid variable         //set outside this function, in the        // parent function      else        valid=false;    });   return valid/ } 

But that currently doesn’t work.

What can I do to make it work, i.e can I stop the validateSomething() function from returning a value until its set to true/false by the inner function?

Would something like this work:

function validateSomething() {   var valid='unset';   $.post('something.php', {x:y},   function(data)   {      if (isSomething(data))        valid=true;         //Here referring to the valid variable         //set outside this function, in the        // parent function      else        valid=false;    });   //Loop without returning until valid is set to true or false   while (valid=='unset')   {      //Do nothing?   }   return valid/ } 

Answer 1

You can force the ajax-call to wait with async: false.

Like this using jquery:

function validateSomething() {     var valid;     $.ajax({         url: 'something.php',         data: {x: y},         type: 'GET',         async: false, // this makes the ajax-call blocking         dataType: 'json',         success: function (response) {             valid= response.valid;         }      });      return valid; } 

However, the big win when using AJAX is that it is asynchronous. This synchronous call might lock up the browser while it is waiting for the server.