Many sites today validate form inputs as the user types. These validations are usually simple, like checking if a username is available, but contribute to a great user interface. I'm going to walk through how to do this with PHP and AJAX, and the advantages and disadvantages.
I'm going to make a simple form with two inputs, a username and a password. I'm then going to validate the inputs as the user types using 2 different methods.
Let's start with the form.
<html> <head> <title>Form</title> </head> <body> <form> Username: <input type='text' id='username' /> <br />Password: <input type='password' id='password' /> </form> </body> </html>
The first field we'll validate is the password field. We'll create a validatePassword() javascript function that makes sure the password is at least 6 characters long.
<script type='text/javascript'>
function validatePassword() {
var field = document.getElementById('password');
var test = true;
//If password is less than 6 characters
if(field.value.length < test =" false;" backgroundcolor =" 'green';" backgroundcolor =" 'red';">
Now we need to add a keyup event to our password input.
<input type='password' id='password' onKeyUp='validatePassword();' />
Now we are going to validate the username by making sure it's available. We can't do this just using javascript since we have to check a database, so we use AJAX and PHP instead. Here's the php page (validateUsername.php).
<?php
//include mysql config file
include 'mysql.php';
//get passed username
$username = $_REQUEST['username'];
//sanitize passed username
$username = mysql_real_escape_string($username);
//make sure username is not empty
if(empty($username))
exit("false");
//query the database for matches
$query = "SELECT id FROM users WHERE username='$username'";
$return = mysql_query($query) or
die ("Error getting matches: " . mysql_error());
//If a match exists, return false, else return true
if(mysql_num_rows($return)>0)
echo 'false';
else
echo 'true';
?>
If the username 'jsmith' is already taken, validateUsername.php?username=jsmith would output 'false'. Otherwise it would output 'true'. Now we need ajax to interact with this page. I'm going to use Prototype for the ajax to make the code easier to understand.
<script type='text/javascript' src='prototype-1.6.0.2.js'></script>
<script type='text/javascript'>
function validateUsername()
{
//get username input
var field = document.getElementById('username');
//Don't use ajax if username is empty
if(field.value.length == 0)
{
field.style.backgroundColor = 'red';
return;
}
//Initialize new ajax request
new Ajax.Request('validateUsername.php', {
method: 'get',
parameters: {
username: field.value
},
//If a response is sent back
onSuccess: function(transport){
//get response text
var response = transport.responseText;
if(response=='true') //validation passed
field.style.backgroundColor = 'green';
else //validation failed
field.style.backgroundColor = 'red';
}
});
}
</script>
Once again we need to add a keyup event to our input.
<input type='text' id='username' onKeyUp='validateUsername();' />
Now we have all out parts. Before I put it all together and show you a demo, understand that validating a form with Ajax should be the last resort. The only time you should use Ajax is if you must interact with a database. Anything else is unnecessary load on your servers. I do feel, however, that using Ajax where needed is well worth the server load.
Here is a link to a demo. Below is the complete source of the html page. The php source is above.
<html>
<head>
<title>Form</title>
<script type='text/javascript'>
function validatePassword() {
var field = document.getElementById('password');
var test = true;
//If password is less than 6 characters
if(field.value.length < 6)
test = false;
if(test) //validation passed
{
//Change input background green
field.style.backgroundColor = 'green';
}
else //Validation failed
{
//Change input background red
field.style.backgroundColor = 'red';
}
}
</script>
<script type='text/javascript' src='prototype-1.6.0.2.js'></script>
<script type='text/javascript'>
function validateUsername()
{
//get username input
var field = document.getElementById('username');
//Don't use ajax if username is empty
if(field.value.length == 0)
{
field.style.backgroundColor = 'red';
return;
}
//Initialize new ajax request
new Ajax.Request('validateUsername.php', {
method: 'get',
parameters: {
username: field.value
},
//If a response is sent back
onSuccess: function(transport){
//get response text
var response = transport.responseText;
if(response=='true') //validation passed
field.style.backgroundColor = 'green';
else //validation failed
field.style.backgroundColor = 'red';
}
});
}
</script>
</head>
<body>
<form>
Username:
<input type='text' id='username'
onKeyUp='validateUsername();' />
<br />Password:
<input type='password' id='password'
onKeyUp='validatePassword();' />
</form>
</body>
</html>
6 comments:
good script...just what I was looking for.
But I had 2 errors in it.
first missing a ) in this part:
or die ("Error getting matches: " . mysql_error();
and when returning the true or false the response var had some spaces at the end so I had to trim it using this:
function rtrim(stringToTrim) {return stringToTrim.replace(/\s+$/,"");
}
so I could rtrim the response like this:
response=rtrim(response);
cheers!
Thanks for catching the missing parentheses.
As far as extra spaces go, it looks like I had an extra new line at the end of the php page. Anything outside of the <?php ?> tag will be printed, including white space, so this was messing things up. Removing the new line or using exit() instead of echo will solve this problem.
if(mysql_num_rows($return)>0)
exit('false');
else
exit('true');
Works fine under FF but get a Oject undefined error under IE7...
Haven't found the cause yet..any ideas?
I had an extra comma in the script that IE caught. Firefox just ignored the error.
It was at the end of line 56 in the completed script. Thanks for catching this, it's fixed now.
Thanx! Works great now :)
btw did u desk check the script 2 find it or did u use some debugger?
cheers
Gilbert
When returning the true or false, the trim function is NOT working what is the proper way to use it? anyone could help me? ..
the length of response result when i used the alert function , it says that "6" characters.
Post a Comment