How do I make this javascript validation work?

Question

Under validateMail(), the variable chump is returning undefined, but it should be either a true or false value.

I don't understand, because the alert() statements under the two conditional statements of finalFlash() work fine, I get a true or false value there.

<script>
function validateRecipient()
{
var recipient=document.messageForm.recipient.value;

if (recipient==null || recipient=="")
  {
  document.getElementById("recipientError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">Please enter a username</div>';
  document.getElementById("recipient_error").className="control-group error";
  return false;
  }

else
  {
  document.getElementById("recipientError").innerHTML="";
  document.getElementById("recipient_error").className="control-group";
  return true;
  }  

}

function validateMessage()
{
var message=document.messageForm.message.value;
if (message==null || message=="")
  {
  document.getElementById("messageError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">Please enter a message</div>';
  document.getElementById("message_error").className="control-group error";
  return false;
  }

else
  {
  document.getElementById("messageError").innerHTML="";
  document.getElementById("message_error").className="control-group";
  return true;
  }    

}


function validateMail()
{
var items = [validateRecipient(), validateMessage(), validateUser()];
var chump = validateUser()
alert(chump)

for (var i in items)
   {
   var item = items[i];
   item
   }

if (validateRecipient() && validateMessage() && validateUser())
   {
   return true;
   }

return false;
}


function validateUser(){
    $.get("/trivia/xhr_test/",
    {
      username: document.messageForm.recipient.value
    },
    function(data){
      return finalFlash(data); // edit suggested by Aamir Adnan
    });
}

function finalFlash(data){
    if (data == "True")
      {
      document.getElementById("recipientError").innerHTML="";
      document.getElementById("recipient_error").className="control-group";
      alert(true)
      return true
      }

    else if (data != null && data != "" && data == "False")
      {
      document.getElementById("recipientError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">That username does not exist</div>';
      document.getElementById("recipient_error").className="control-group error";
      alert(false)
      return false
      }
}



</script>

missing return `finalFlash(data);` should be `return finalFlash(data);` in `validateUser` function — Aamir Rind, Dec 31 '12 at 09:53
@AamirAdnan Not just that. The `return` would return to the anonymous function, not `validateUser`. @PinkiePie you'll have to mess around with callbacks. — Chris, Dec 31 '12 at 09:57
may be then define `chump` as a global variable and then use it instead of returning value overwrite the global variable. — Aamir Rind, Dec 31 '12 at 10:01
@AamirAdnan I edited it with `return finalFlash(data)`, but it's still giving me undefined. — Pinkie Pie, Dec 31 '12 at 10:03

score 2 · Answer 1 · edited May 23 '17 at 12:04

2

Your validateUser function starts an asynchronous get request and returns right away. finalFlash is called when the get completes, but has nothing to do with the return value of validateUser.

See How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request? for how to convert it to a synchronous request.

edited May 23 '17 at 12:04

Community

1
1

answered Dec 31 '12 at 10:02

ysth

96,171
6
121
214

score 0 · Answer 2 · answered Dec 31 '12 at 10:20

Hope This code helps you

<script>
function validateRecipient()
{
var recipient=document.messageForm.recipient.value;

if (recipient==null || recipient=="")
  {
  document.getElementById("recipientError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">Please enter a username</div>';
  document.getElementById("recipient_error").className="control-group error";
  return false;
  }

else
  {
  document.getElementById("recipientError").innerHTML="";
  document.getElementById("recipient_error").className="control-group";
  return true;
  }  

}

function validateMessage()
{
var message=document.messageForm.message.value;
if (message==null || message=="")
  {
  document.getElementById("messageError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">Please enter a message</div>';
  document.getElementById("message_error").className="control-group error";
  return false;
  }

else
  {
  document.getElementById("messageError").innerHTML="";
  document.getElementById("message_error").className="control-group";
  return true;
  }    

}


function validateMail()
{
  validateUser();
}

function validateAll(chump){

var items = [validateRecipient(), validateMessage()];

for (var i in items)
   {
   var item = items[i];
   item
   }

if (validateRecipient() && validateMessage() && chump)
   {
   return true;
   }

return false;

}
function validateUser(){
    $.get("/trivia/xhr_test/",
    {
      username: document.messageForm.recipient.value
    },
    function(data){
      validateAll(finalFlash(data)); // edit suggested by Aamir Adnan
    });
}

function finalFlash(data){
    if (data == "True")
      {
      document.getElementById("recipientError").innerHTML="";
      document.getElementById("recipient_error").className="control-group";
      alert(true)
      return true
      }

    else if (data != null && data != "" && data == "False")
      {
      document.getElementById("recipientError").innerHTML='<div style="font-size:13px; color:#b94a48; clear:both">That username does not exist</div>';
      document.getElementById("recipient_error").className="control-group error";
      alert(false)
      return false
      }
}



</script>

Here this script will help you do what you want. The mistake you have done is that u had ajax call on validateUser method and you have called it twice. Each time when the ajax request is fired it will act asynchronously and the remaining code will never wait for the ajax call to get complete. So I have made necessary changes that will allow the code to execute after the completion of the ajax request.

Actually when will u call the validateMail function – AmGates Dec 31 '12 at 10:40 — AmGates, Dec 31 '12 at 10:40

How do I make this javascript validation work?

2 Answers2