Good morning, I'm a little noob in js and I've made one script to validate a registration form.
The code works perfectly, but I know my code is not the best way to do it, so I'd like someone would read it and tell me where are my mistakes, so I can learn.
This is the "js" code.
Code:
//Sleep
function sleep(ms){
var dt = new Date();
dt.setTime(dt.getTime() + ms);
while (new Date().getTime() < dt.getTime());
}
$(document).ready(function(){
//Variables globales
var usr = $("#username");
var pass = $("#password");
var cpass = $("#confirm_password");
var email = $("#email");
var b_usr = false;
var b_pass = false;
var b_cpass = false;
var b_email = false;
var b_agree = false;
//Username Check
function validateUsername(){
usr = $("#username").val();
if(usr.length >= 4)
{
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ usr,
success: function(msg){
$("#status").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#username").removeClass('object_error'); // if necessary
$("#username").addClass("object_ok");
$(this).html(' <img src="tick.ico" align="absmiddle">');
b_usr = true;
}
else
{
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
$(this).html(msg);
b_usr = false;
}
});
}
});
}else{
$("#status").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">The username should have at least 4 characters.</p>');
$("#username").removeClass('object_ok'); // if necessary
$("#username").addClass("object_error");
b_usr = false;
}
}
//Password check
function validatePassword() {
pass = $("#password").val();
if(pass.length >= 6){
$("#status2").html(' <img src="tick.ico" align="absmiddle">');
b_pass = true;
}else{
$("#status2").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">Your password must have at least 6 characters</p>');
$("#password").removeClass('object_ok'); // if necessary
$("#password").addClass("object_error");
b_pass = false;
}
}
//Password confimation check
function validatePassword2() {
cpass = $("#confirm_password").val();
var pass = $("#password").val();
if(cpass == pass){
if(cpass.length >= 6){
$("#status3").html(' <img src="tick.ico" align="absmiddle">');
b_cpass = true;
}else{
$("#status3").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">Your password must have at least 6 characters</p>');
$("#confirm_password").removeClass('object_ok'); // if necessary
$("#confirm_password").addClass("object_error");
b_cpass = false;
}
}else{
$("#status3").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">The passwords doesn`t match</p>');
$("#confirm_password").removeClass('object_ok'); // if necessary
$("#confirm_password").addClass("object_error");
b_cpass = false;
}
}
function validateEmail() {
email = $("#email").val();
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(email.match(mailformat)){
$.ajax({
type: "POST",
url: "checkmail.php",
data: "email="+ email,
success: function(msg){
$("#status4").ajaxComplete(function(event, request, settings){
if(msg == 'OK')
{
$("#email").removeClass('object_error'); // if necessary
$("#email").addClass("object_ok");
$(this).html(' <img src="tick.ico" align="absmiddle">');
b_email = true;
}
else
{
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
$(this).html(msg);
b_email = false;
}
});
}
});
}else{
$("#status4").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">The email you have entered is invalid</p>');
$("#email").removeClass('object_ok'); // if necessary
$("#email").addClass("object_error");
b_email = false;
}
}
//Validate checkbox
$("#agree").change(function () {
if(document.form.agree.checked == true){
$("#status7").html('');
$("#agree").removeClass('object_error'); // if necessary
$("#agree").addClass("object_ok");
b_agree = true;
}else{
$("#status7").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">You must accept the agreement</p>');
$("#agree").removeClass('object_ok'); // if necessary
$("#agree").addClass("object_error");
b_agree = false;
}
});
//Validation on blur.
usr.blur(validateUsername);
pass.blur(validatePassword);
cpass.blur(validatePassword2);
email.blur(validateEmail);
//Validation on submit.
// Envio de formulario
$("#signupForm").submit(function(){
validateUsername();
validatePassword();
validatePassword2();
validateEmail();
if(document.form.agree.checked == true){
$("#status7").html('');
$("#agree").removeClass('object_error'); // if necessary
$("#agree").addClass("object_ok");
b_agree = true;
}else{
$("#status7").html('<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">You must accept the agreement</p>');
$("#agree").removeClass('object_ok'); // if necessary
$("#agree").addClass("object_error");
b_agree = false;
}
sleep(2000);
if(b_usr & b_pass & b_cpass & b_email & b_agree){
return true;
}
else{
return false;
}
});
});
These are the "php" codes called from the "js":
PHP Code:
<?php
// This is a sample code in case you wish to check the username from a mysql db table
if(isSet($_POST['username'])){
$username = $_POST['username'];
$password = $_POST['password'];
$truepass = "";
$truenick = "";
$dbHost = 'localhost'; // usually localhost
$dbUsername = 'root';
$dbPassword = '';
$dbDatabase = 'supahsonic';
$db = mysql_connect($dbHost, $dbUsername, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$cons="select user_nick, user_pass from user where user_nick='".$username."' AND user_pass='".$password."'";
$result=mysql_query($cons);
while($fila=mysql_fetch_array($result)){
$truenick=$fila['user_nick'];
$truepass=$fila['user_pass'];
}
if($password==$truepass && $username==$truenick){
echo 'OK';
}
}
?>
PHP Code:
<?php
// This is a sample code in case you wish to check the email from a mysql db table
if(isSet($_POST['email']))
{
$email = $_POST['email'];
$dbHost = 'localhost'; // usually localhost
$dbemail = 'root';
$dbPassword = '';
$dbDatabase = 'supahsonic';
$db = mysql_connect($dbHost, $dbemail, $dbPassword) or die ("Unable to connect to Database Server.");
mysql_select_db ($dbDatabase, $db) or die ("Could not select database.");
$sql_check = mysql_query("select user_id from user where user_mail='".$email."'") or die(mysql_error());
if(mysql_num_rows($sql_check))
{
echo '<p style="color:white; font-size:14px; text-align:center; padding:5px; background-color:rgba(255,0,0,0.3);">The email <STRONG>'.$email.'</STRONG> is already in use.</p>';
}
else
{
echo 'OK';
}
}
?>
Thank you in advance.
Before you post, read our: 
