This is my first ever attempt at Ajax form validation, and everything works as expected, the final true example will hold a lot more input fields than in my testing scripts which are below.
The file is expected to get a lot bigger as in my testing I have only used 3 input fields, how can I improve on this:
HTML file
<form action="#" method="post">
<fieldset>
<legend>Login Details</legend>
<label>Your Email:</label><input id="email" name="email" type="text" onblur="return ajax ('email');" />
<label>Password:</label><input id="password" name="password" type="text" onblur="return ajax ('password');" />
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label>Your Username:</label><input id="username" name="username" type="text" onblur="return ajax ('username');" />
</fieldset>
<input class="submit" type="submit" value="Create Account" />
</form>
As you can see in the event of an onblur on the input fields I call the function ajax. I also send with the function a parameter which is exact to the id. Here is my function:
JavaScript
function ajax (id) {
var value = $('#' + id).val();
$('#' + id).after('<div class="loading"></div>');
if (id === 'email') {
$.post('http://www.example.com/ajax.php', {email: value},
function (response) {
$('#email_error, #email_success').hide();
setTimeout(function(){
$('.loading').hide();
finish_ajax (id, response);
}, 1000);
});
}
if (id === 'password') {
$.post('http://www.example.com/ajax.php', {password: value},
function (response) {
$('#password_error, #password_success').hide();
setTimeout(function(){
$('.loading').hide();
finish_ajax (id, response);
}, 1000);
});
}
if (id === 'username') {
$.post('http://www.example.com/ajax.php', {username: value},
function (response) {
$('#username_error, #username_success').hide();
setTimeout(function(){
$('.loading').hide();
finish_ajax (id, response);
}, 1000);
});
}
return false;
}
function finish_ajax (id, response) {
$('#' + id).after(response).fadeIn(2000);
}
Here is what I have tried to do:
With the id that I send with the function I assign the value of the input field to a variable named value.
Using the same id I then assign a loading div which contains a gif image in my css.
Depending on the id send the correct request with the correct name so I can determine in my php file the correct validation is done on each of the input fields. Here is my php file.
PHP file
if (isset($_REQUEST['email'])) {
$q = $dbc -> prepare("SELECT email FROM accounts WHERE email = ?");
$q -> execute(array($_REQUEST['email']));
if (!filter_var($_REQUEST['email'], FILTER_VALIDATE_EMAIL)) {
echo '<div id="email_error" class="error">This is not a valid email!</div>';
}
elseif ($q -> rowCount() > 0) {
echo '<div id="email_error" class="error">Email already owns an account!</div>';
}
else {
echo '<div id="email_success" class="success">Success!</div>';
}
}
elseif (isset($_REQUEST['password'])) {
if (strlen($_REQUEST['password']) < 6) {
echo '<div id="password_error" class="error">Your password is not long enough.</div>';
}
else {
echo '<div id="password_success" class="success">Password Success!</div>';
}
}
elseif (isset($_REQUEST['username'])) {
$q = $dbc -> prepare("SELECT username FROM accounts WHERE username = ?");
$q -> execute(array($_REQUEST['username']));
if (strlen($_REQUEST['username']) < 3) {
echo '<div id="username_error" class="error">Has to be at least 3 characters</div>';
}
elseif ($q -> rowCount() > 0) {
echo '<div id="username_error" class="error">Username already taken</div>';
}
else {
echo '<div id="username_success" class="success">Username available</div>';
}
}
else {
header('Location: http://www.projectv1.com');
exit();
}
Here I check the name of the request and perform the correct validation.
I have tried to do this as best I can and there may be many errors in it performance-wise which I am unaware of.
