Form validation: getting asynchronous return value

Question

I am learning ajax. I need to validate a form using ajax to check if user selected pseudo is present in a json file (users.json). I need to get the value of var checkPseudo. Actualy this var is always "undefined".

I think this is a classic problem with asynchronous development.

note: I may not use Jquery library.

Here is my code

<!-- This is my form -->

<form method="post" id="frmInscription" action="adduser.php" onsubmit="return formValidation(this)">
    Pseudo :<input name="pseudo" type="text" /><br />
    <input type="submit" name="send" value="Submit" />
</form>


<!-- javascript functions to validate the form -->

function makeRequestCheckPseudo(callback){
    if(xhr = createXhr()){ // returns an xhr object
        xhr.open("GET", "users.json", true);
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                //I use a callback function to get the ajax responseText in the function formValidation(frm)
                callback.apply(xhr);
                return callback(); //I'm not sure if I need to return the callback function
            }                
        }
        xhr.send(null);
    };
}

function formValidation(form){
    var pseudo = form.elements["name"].value;                
    var checkPseudo = makeRequestCheckPseudo(function(){
        var jsonPseudos = JSON.parse(this.responseText); // here I get the datas from users.json by ajax response
        if(!jsonPseudos[pseudo]){ //if pseudo is present in the json object properties
            alert("pseudo is not present in users.json !");
            return true; // I want to send my form
        } else {
            alert("pseudo is present users.json !");
            return false; // I don't want to send my form          
        }
    });
    return checkPseudo; // should be "true" or "false" but I get "undefined" 
    //if checkPseudo is false the form will not be send
    //if checkPseudo is true the form will be send
}

You are making mistake to get element values this should be var pseudo = form.elements["pseudo"].value;; — itzmukeshy7
– itzmukeshy7, Commented Apr 4, 2016 at 13:16

Arun P Johny · Accepted Answer · 2016-04-04 13:06:27Z

2

Because that is how async programs work.

What you can do is to by default prevent the form submit, then if the validation is successful then manually call the form's submit method

function makeRequestCheckPseudo(pseudo, callback) {
  if (xhr = createXhr()) { // returns an xhr object
    xhr.open("GET", "users.json", true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState == 4 && xhr.status == 200) {
        //I use a callback function to get the ajax responseText in the function formValidation(frm)
        callback.apply(xhr);
        callback(); //I'm not sure if I need to return the callback function
      }
    }
    xhr.send(null);
  };
}

function formValidation(form) {
  var pseudo = form.elements["name"].value;
  var checkPseudo = makeRequestCheckPseudo(function() {
    var jsonPseudos = JSON.parse(this.responseText); // here I get the datas from users.json by ajax response
    if (!jsonPseudos[pseudo]) { //if pseudo is present in the json object properties
      alert("pseudo is not present in users.json !");
      form.submit(); //if the validation is successfull then manually trigger the form submit
    } else {
      alert("pseudo is present users.json !");
    }
  });
  return false; //prevent the default action
}

answered Apr 4, 2016 at 13:06

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

zm455 Over a year ago

Your solution works ! Thank you so much sir ! May I ask you another question ? What if I need to make a second ajax validation after the pseudo validation ? Exemple: After having checked the pseudo with ajax I would like to check if email is in email.json. Where is the best moment in my code have I to do that second ajax validation ? Inside the first ajax validation ?

Arun P Johny Over a year ago

form.submit(); should be replaced with the second ajax request, then inside that success handler you need to do form.submit();

zm455 Over a year ago

Ok I understand. Thank you so much. Then It is not possible to return a value as I wished to do because this is how ajax works. Sir I can't vote for you right now because I haven't enough reputation but I promise to come back because you mad my day. Have my respect please

zm455 Over a year ago

I can't accept it now because the stackoverflow's system tells me I need to have more "reputation" score to be able to vote . . . so all I can do is to promise you I will come back to accept your answer when my reputation will be high enough ... I will not forget you @Arun P Johny.

Arun P Johny Over a year ago

@zm455 it is not up voting, there is a accept tick mark

|

Roy · Accepted Answer · 2016-04-04 13:10:56Z

1

You are forgetting to pass pseudo as the first argument. Might fix the issue.

function formValidation(form){
    var pseudo = form.elements["name"].value;                
    var checkPseudo = makeRequestCheckPseudo(pseudo, function(){
        // rest of the code
    })
}

And in case of this line:

return callback();//I'm not sure if I need to return the callback function

I guess you need to return the callback() function. Otherwise the return value will not be set to checkPseudo at the line:

var checkPseudo = makeRequestCheckPseudo(pseudo, function(){
    // rest of the code
}

edited Apr 4, 2016 at 13:10

answered Apr 4, 2016 at 13:05

Roy

1,9771 gold badge15 silver badges21 bronze badges

1 Comment

zm455 Over a year ago

@Rot thank you for your suggestion. In fact I need to edit my code here because I was trying some tests by passing this "pseudo" arguments. I mean in my production code I do not use this "pseudo" argument But thank you very much !

itzmukeshy7 · Accepted Answer · 2016-04-04 13:21:21Z

Try this ;)

function formValidation(form){
  var pseudo = form.elements["pseudo"].value;                
  if(xhr = createXhr()){ // returns an xhr object
    xhr.open("GET", "users.json", true);
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4 && xhr.status == 200){
        var jsonPseudos = JSON.parse(this.responseText); // here I get the datas from users.json by ajax response
        if(!jsonPseudos[pseudo]){ //if pseudo is present in the json object properties
          alert("pseudo is not present in users.json !");
          return true; // I want to send my form
        } else {
          alert("pseudo is present users.json !");
          return false; // I don't want to send my form          
        }            
    }
    xhr.send(null);
  }
}

Try a single function and you are referencing a field in wrong way here: var pseudo = form.elements["name"].value;

Collectives™ on Stack Overflow

Form validation: getting asynchronous return value

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related