假值被忽略

Question

I have a registration form that checks onchange if a username already exists and displays a BS alert. The function to check this uses Ajax. Answers to my earlier question led me to improve my code to use callback in my Ajax function. So now I have the following code:

HTML:

onchange="callAjax('gebruikersnaam', document.getElementById('gebruikersnaam').value, checkBestaandeGebruikersnaam)"

JavaScript main function:

function callAjax(arg1, arg2, callback){
var request = new XMLHttpRequest();

request.onreadystatechange = function() {
  if(request.readyState === 4 && request.status === 200) { 
        callback(request.responseText);
    } else {
        document.getElementById("message").innerHTML = 'An error occurred during your request: ' +  request.status + ' ' + request.statusText;
    } 
  }
request.open("POST", "core/functions/checkBestaandeGebruikersnaam.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(arg1+"="+arg2);    
}

JavaScript callback function:

function checkBestaandeGebruikersnaam(result) {
if(result == "1") {
    document.getElementById("message").innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
    return false;
}
else {
    document.getElementById("message").innerHTML = '';
}
}

Now I have a generic Ajax request that I can re-use by feeding it different parameters. So thanks for that. Can someone confirm if I am using the callback functionality correctly?

Now, what I really want is to re-use the function checkBestaandeGebruikersnaam() when the form is submitted. I have the following code:

HTML:

 <form action="register.php" onsubmit="return validate()" name="registerForm" method="post" class="col-md-10 col-md-offset-1 col-xs-12 col-xs-offset-0">

JavaScript:

function validate() {
var errMsgHolder = document.getElementById("message");
if(checkPassword() === false ) {
    errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
            return false;
} else if(checkPasswordsMatch() === false){
    errMsgHolder.innerHTML =
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
            return false;
} else if(checkBestaandeGebruikersnaam() === false){
    errMsgHolder.innerHTML = 
            '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
            return false;
}

The functions checkPassword() and checkPasswordsMatch() don't use Ajax and they work as expected within the function validate(). But when I test the function validate() for checkBestaandeGebruikersnaam() it doesn't work. It ignores the false value and submits the form. I thought the use of a callback function should solve this, but apparently I am still doing something wrong. Please enlighten me and thanks for your time.

Answer 1

Let's evaluate whats happening step by step:

The validate() function calls checkBestaandeGebruikersnaam() without passing any parameter.

Inside checkBestaandeGebruikersnaam(), value of result is undefined, the else block gets executed that does not return anything.

In validate() the check checkBestaandeGebruikersnaam() === false evaluates to false.

Since validate() does not return false, This makes javascript to submit the form.