CODEWITHSUNDEEP
javascriptphpjqueryajaxforms
Europeuser
Europeuser

Reputation: 942

jquery validate form with ajax call to external php file that checks all fields and block form submit if there is error message

I want to validate form field on submit event. I am sending ajax request to php file that checks the fields and returns error message or nothing if all is OK. Here is the js code I have:

$('form.p_form').submit(function (){
var description = $.trim($('#f9').val());
//this blocks form submit if empty field and it works
if(description === '') return false;
//this doesnt work
if(description !== ''){
var aa = $.post("checkdescription.php",{
     description: description
 },
 function(data, status){
    if(data !== ''){
    return data;
    }
 });

 //here I need to know the response text returned from ajax so I can say like this:
 if(aa === 'error message'){
 return false;
    }
 }
});

Please help, I am stacked and I am posting this question for second time as I could not get help, Thanks in advance !

Upvotes: 0

Views: 759

Answers (3)

Ahmad Baktash Hayeri
Ahmad Baktash Hayeri

Reputation: 5880

Your variable aa will not contain any data that you are expecting (in fact it may contain the promise returned from calling the post method of AJAX).

Moreover you're using the default synchronous type of ajax call with the post method.

In order to have access to the returned data (even outside of the promise) you may use $.ajax with the property async: false as such:

 var aa = ''; //the result
 $.ajax({
     url: "checkdescription.php",
     async: false,
     data: {
     description: description
     }, 
     success: function(data, status){
         aa = data;
      }
});

Then, you can check the value of the variable aa soon after the ajax call.

 if(aa === 'error message'){
     return false;
 }

Upvotes: 3

Blake
Blake

Reputation: 2314

You're trying to compare the response synchronously with an asynchronous get call. The value of var aa won't be set by the callback function until after the ajax call has completed. You have to keep that in mind when trying to compare synchronous vs asynchronous.

So let's go step-by-step what would happen with your code here:

  1. Form submit
  2. [Presumption] description isn't blank
  3. var aa = undefined
  4. Ajax post is called to checkdescription.php
  5. aa does not equal "error message"

aa will never equal 'error message' and hits the end of your submit function (because the value of aa still hasn't been set yet by the completed ajax response

  1. (This will probably never in this code, but let's pretend it could) The ajax call returns a response and then your call back function would be instantiated and it would either return data or false. Now var aa has a value.

Upvotes: 0

Yogesh
Yogesh

Reputation: 924

Script should catch response in 'data' variable of post request. i.e. either empty on success or 'error message' on error. Please try below and check if this works for you.

var aa = $.post("checkdescription.php",{
 description: description
 },
 function(data, status){
  // data will be empty is everything is ok and "error message" if there is validation error
   if(data == 'error message'){
       // handle error
   } else {
      // on success it should be here
   }
 });

Upvotes: 0

Related Questions