I'm lost again. I have a registration form with three JS functions that produce the desired output when called by onchange from my html form. So they produce a BS alert while the user is filling out the form. These are the three functions:
To check password length:
function checkPassword() {
var x = document.registerForm;
var wachtwoord = x.wachtwoord.value;
var errMsgHolder = document.getElementById("message");
if (wachtwoord.length < 3 || wachtwoord.length >30) {
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Let op!</strong> Kies een wachtwoord van minimaal 3 en maximaal 30 tekens.</div>';
setTimeout(function () {document.getElementById("message").innerHTML =''; }, 5000);
return false;
}
}
To check if the 2 passwords match:
function checkPasswordsMatch() {
var x = document.registerForm;
var wachtwoord = x.wachtwoord.value;
var herhaal_wachtwoord = x.herhaal_wachtwoord.value;
var errMsgHolder = document.getElementById("message");
if (wachtwoord !== herhaal_wachtwoord) {
errMsgHolder.innerHTML =
'<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Let op!</strong> Wachtwoorden komen niet overeen.</div>';
return false;
}
}
To check if username already exists (ajax call via php to database):
function checkBestaandeGebruikersnaam(){
var x = document.registerForm;
var gebruikersnaam = x.gebruikersnaam.value;
var errMsgHolder = document.getElementById("message");
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState === 4 && request.status === 200) {
if(request.responseText == "1") {
errMsgHolder.innerHTML = '<div class="alert alert-warning"><a href="#" class="close" data-dismiss="alert" aria-label="close">×</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}
else {
errMsgHolder.innerHTML = '';
}
} else {
errMsgHolder.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("gebruikersnaam="+gebruikersnaam);
}
But these functions just show an alert and don't prevent a user from submitting a form with incorrect data. So I want to revisit these functions when the user submits. To do that I have the following line in my HTML register form:
<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">
Then in JS I have the following function:
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">×</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">×</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">×</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}
When I test this it works for checkPassword() and checkPasswordsMatch(). Meaning I get the expected BS alerts and the submission of the form is cancelled. But when I test the checkBestaandeGebruikersnaam() it does not. It briefly shows the BS alert, but then it continues to my register.php file. So for some reason it disregards the returned 'false' in onsubmit and submits anyway.
I can't get my head around it. Why is it doing this one differently. Can anyone shed some light on the issue?
Edit: I have followed the link and spent the rest of the day trying to grasp the concept of callback functions. I think I have it now, but my problem is not solved. So I must still be doing something wrong.
Since the problem is obviously with the way I return false from the function checkBestaandeGebruikersnaam() I will only list the changes to that function. I have the following code now:
HTML:
onchange="callAjax(checkBestaandeGebruikersnaam)"
JavaScript main function:
function callAjax(callback){
var gebruikersnaam = document.registerForm.gebruikersnaam.value;
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("gebruikersnaam="+gebruikersnaam);
}
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">×</a><strong>Let op!</strong> Die gebruikersnaam is al bezet, kies een andere gebruikersnaam.</div>';
return false;
}
else {
document.getElementById("message").innerHTML = '';
}
}
Can someone tell me if I am using the callback functionality correctly? It does perform as expected (on the onchange event).
The function validate() still doesn't work for checkBestaandeGebruikersnaam() though. It still executes, even if checkBestaandeGebruikersnaam() === false. What have I done wrong now? Please enlighten me and thanks for your time.
