I have a simple form validation I am doing. I am using AJAX to validate the user's email. When I console.log() the return value from the php script, it returns the correct value, but the ajax script... runs twice based on what I can tell from console logs.
Maybe I am doing this 100% wrong. But I have done this in the past and it works. I can't seem to get any Ajax call to work any more with basic Javascript because I run into the same error.
Something else that is odd.. I am also checking to see if the fields are empty and returning the form as false. When the form isn't fully filled out I see the correct output in the console. When I fully fill the form out. The AJAX query does the incorrect behavior.
function registrationCheck(){
var firstName = document.forms["registerForm"]["firstName"];
var lastName = document.forms["registerForm"]["lastName"];
var newAccount = document.forms["registerForm"]["newAccount"];
var email = document.forms["registerForm"]["email"];
var password = document.forms["registerForm"]["password"];
var verifyPassword = document.forms["registerForm"]["verifyPassword"];
var error = document.getElementById("registerError");
var errorMessage = "";
var formValidation = true;
if (firstName.value == "") {
firstName.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}
if (lastName.value == "") {
lastName.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}
if (newAccount.value == "") {
newAccount.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}
if (email.value == "") {
email.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}else{
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
var answer = xmlhttp.responseText.trim();
if (answer == "true") {
errorMessage = "Email is in use";
formValidation = false;
console.log(formValidation);
console.log("Answer:" + answer);
}
}
}
xmlhttp.open("GET", "../ajax.php?e=" + email.value, true);
xmlhttp.send();
console.log(formValidation);
}
if (password.value == "") {
password.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}
if (verifyPassword.value == "") {
verifyPassword.style.borderColor="red";
errorMessage = "Please fill in all fields.";
formValidation = false;
}
if (formValidation) {
return true;
}else{
error.innerHTML = "Please fill in all fields";
return false;
}
}
<form action="../register" method="POST" role="form" name="registerForm" onsubmit="return registrationCheck()">
<div class="form-group">
<label for="firstName">First Name:</label>
<input type="text" name="firstName" class="form-control" id="" placeholder="First name">
</div>
<div class="form-group">
<label for="lastName">Last Name:</label>
<input type="text" name="lastName" class="form-control" id="" placeholder="Last name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" name="email" class="form-control" id="" placeholder="Email Address">
</div>
<div class="form-group">
<label for="newAccount">Account:</label>
<input type="text" name="newAccount" class="form-control" id="" placeholder="Account name">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" name="password" class="form-control" id="" placeholder="Password">
</div>
<div class="form-group">
<label for="verifyPassword">Verify Password:</label>
<input type="password" name="verifyPassword" class="form-control" id="" placeholder="Confirm your password">
</div>
<button type="submit" class="btn btn-primary">Register Account</button>
</form>
