There are times where you need to validate a form to a data stored in a database without the need to submit the form beforehand. The solution -
Ajax (shorthand for asynchronous JavaScript and XML).
For example, you are creating a user registration form where obviously, the username to choose from needs to be unique. Instead of validating the username after form submission, wouldn’t it be much friendlier if the form can validate itself from the server asynchronously in the background from a simple event such as on submit or unfocus event?
In this post, I will be showing how you can the validate with Ajax using PHP/MySQL as your back-end. A table called user is created in the MySQL database which contains some dummy usernames. When user enters a username existed from this table, the form will prompt an error with message “Username already taken. Please try a different username.”
What you need:
- jQuery 1.4, my favourite javascript library. Click here to download
- jQuery plugin, Validation 1.6. Click here to download
- PHP and mySQL enabled web server (for this example, I’m using PHP 5 and MySQL 5)
You’ll gonna need two files:
- form.php < this will be your form
- check_username.php < this will check if data exist in the user table in your MySQL database
Link jQuery and the plugin to the form page first. You can refer to the source file(link at the bottom of this post) if you are not clear on how to do this. Then add the javascript code below and you’re done on this page.
I’ve commented the code below to explain what each line does. I’m not gonna touch on the Validation plugin here but if you are interested, you can view its Documentation available from the download site.
$(document).ready(function() {
$("#myform").validate(); //apply the validation plugin to your form
$("#username").rules("add", {
remote: {
url: "check_username.php", //place the PHP here
type: "post", //using the post method to send data (you may also use the get method)
data: {
username: function() {
return $("#username").val(); //get the value from the text input
}
}
},
messages: {
remote: "Username already taken. Please try a different username." //set the message you want to display
}
});
});
The next step is to create the PHP page that checks if the user existed. Because the validation only works with Boolean values, so you will need to code the page to return the text true if username doesn’t exist or false otherwise. Here is the search Query in PHP for this example.
$query="SELECT * FROM users WHERE LOWER(username) = '$username'";
$result=mysql_query($query);
$num=mysql_num_rows($result);
//check if number of users with the username exist more than 0
if($num >0){
echo "false";
}else{
echo "true";
}
Test the form by typing any username that has already existed, your form should be showing an error message next to the username input as shown in the demo below.
Click here to view live demo
Get the complete source file: Ajax Form Example (99)
