basically in this registration system I want to check if:
All of the fields are filled up.
Username length checking.
Password length checking.
Checking if email is valid.
Checking if email is not taken.
Checking if Username is not taken.
Checking if password is equal to repassword.
Problem:
The first step goes fine, but after I fill ALL of the inputs, the same errors gets poped up, BUT there are no 2px red border around the inputs.
If I won't fill them all, I will get the same error + red borders.
Basically I want to debug/troubleshoot what the system is doing currently, and use timeouts just to test on localhost if it works correctly.
There is my code:
$("#center").on('click', function(e) {
// Prevent submit.
e.preventDefault();
/**
* Variables
**/
// Errors div block
var errors = $(".errors");
// Username input
var username = $("#username");
// Password input
var password = $("#password");
// Re-password input
var repassword = $("#repassword");
// Email input
var email = $("#email");
// Display name input
var display = $("#display");
// Validating all forms
var incomplete = $(':input', this.form).filter(function() { return $(this).val() == ''; });
// For submit, need $this var
var self = this;
/************************************/
/**
* Booleans
**/
var inputsAreFilled;
var validateAccount;
var validatedUsername;
var validatedEmail;
/***
* SYSTEM START
**/
validating("Validating Inputs...");
setTimeout(function() {
$(':input', this.form).each(function(i, ele) {
if (ele.value.trim() == "") {
ele.style.border = '2px solid red';
parseError("One of the fields are empty.");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
restore();
}
else
{
$(this).removeAttr('style');
}
});
if (!incomplete.length) {
inputsAreFilled = true;
} else {
inputsAreFilled = false;
}
}, 1000);
if (inputsAreFilled) {
validating("Validating Data...");
setTimeout(function() {
// Username length
if (username.val().length() < 3) {
parseError("Your username is too short.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (username.val().length > 20) {
parseError("Your username is too long.");
username.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length < 5) {
parseError("Your password is too short.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val().length > 20) {
parseError("Your password is too long.");
password.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length < 3) {
parseError("Your display name is too short.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (display.val().length > 20) {
parseError("Your display name is too long.");
display.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (!isValidEmailAddress(email.val())) {
parseError("Your email address is not valid");
email.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else if (password.val() != repassword.val()) {
parseError("Your passwords are not equal.");
password.css("border", "solid 2px red");
repassword.css("border", "solid 2px red");
validateAccount = false;
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validateAccount = true;
}
}, 1000);
if (validateAccount) {
validating("Checking username...");
setTimeout(function() {
validateUsername(username.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedUsername = false;
parseError("That username is already in use.");
username.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedUsername = true;
}
});
}, 1000);
if (validatedUsername) {
validating("Checking email...");
setTimeout(function() {
validateEmail(email.val()).done(function(data) {
if ($.trim(data) == 1) {
validatedEmail = false;
parseError("That email is already in use.");
email.css("border", "solid 2px red");
restore();
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
} else {
validatedEmail = true;
}
});
}, 1000);
}
else
{
validating("Global Check - Please wait");
setTimeout(function() {
if (validateAccount && validatedUsername && validatedEmail && inputsAreFilled)
{
validating("Done - Redirecting...");
self.form.submit();
}
else
{
parseError("An error has occured!");
$("#close").click(function() {
errors.html("");
errors.fadeOut("slow");
});
}
}, 1000);
}
}
}
});
And my functions:
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
}
function restore() {
$("#center").attr('value','Continue');
$(".displaying_form").css("opacity", "1.0");
}
function parseError(message) {
$(".errors").html(message + "<span id='close'>X</span>");
$(".errors").fadeIn();
}
function validating(message) {
$("#center").attr('value', message);
$(".displaying_form").css("opacity", "0.6");
$("#center").css("cursor", "default");
}
function validateUsername(username, type) {
return $.post("js/ajax/ajax.php", { validateUsername : 1 });
}
function validateEmail(username, type) {
return $.post("js/ajax/ajax.php", { validateEmail : 1 });
}
Basically, it doesn't go to the next steps, it sticks to the first step. After all inputs are filled up, it gives me the error: "One of the fields are empty."
Why is it doing that? Why won't it continue?