如何使這個JavaScript驗證工作？

Question

在validateMail()下，變量chump正在返回undefined，但它應該是true或false值。

我不明白，因爲finalFlash()這兩個條件語句下的語句alert()工作正常，我在那裏得到一個真或假的值。

<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> 

Answer 1

您的validateUser函數啓動異步獲取請求並立即返回。當get完成時調用finalFlash，但與validateUser的返回值無關。

請參閱How can I get jQuery to perform a synchronous, rather than asynchronous, Ajax request?瞭解如何將其轉換爲同步請求。

Answer 2

希望這個代碼可以幫助你

<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> 

下面這個腳本會幫助你做你想做的。你所犯的錯誤是你對validateUser方法有一個Ajax調用，並且你調用了它兩次。每次發出ajax請求時，它都將異步執行，其餘代碼將永遠不會等待ajax調用完成。所以我做了必要的修改，讓代碼在完成ajax請求後執行。