SQL PHP HTML ASP JavaScript articles and free scripts to download

Validation with onBlur event using PHP Ajax

We have seen how to validate form using PHP & Ajax. We will improve the script further to have error message displayed by the side of the form component as we move out of the particular html form member. For example as we type the first name and move to the next member our validation will check and display the error message if any. This will give better user experience as the user comes to know immediately what the error is.

Demo form validation

Checking the availability of userid

Related Tutorial
Ajax Validation Basic
Here we can check the availability of userid and immediately tell the user about the status. We need not send all the data to server and check the availability of userid. This way while the user is entering the other field data we can display the result of availability of userid to the user. To keep the script simple we have not used database table here and only checked against some selected userids. So if the userid is abcd or efgh then the userid validation will fail and for any other value it will pass.

Using the div tag to display the status

Each component of the form will have its own div tag to display the error message by the side of it. Each one is named related to the input box for easy identification. Here is one example.

<tr><td>userid</td><td> <input type=text name=userid id='userid' onBlur=ajaxFunction('userid_div')></td><td><div id="userid_div"></div></td></tr>

onBlur event handler

We have used onBlur event handler in JavaScript to use the function ajaxFunction to send the data to server. Here while calling the form we are submitting the div tag name for which the error or success message is to be displayed. We have used the same techniques of form data collection and posting to server as we discussed in Ajax From Validation part 1. So we are not explaining again.

The server side script

Here we have collected all the data first and then used one switch statement to validate and display message for particular form component and post back the error message.

Finally the form is submitted

. Now if the form is submitted then all the data will be posted to server side for further processing. We left this part as you can develop this to integrate to your requirment

There are different ways to handle such script, you can try on your own to further improve or modify the script.

Download the form validation code here
Google+
Post Comment This is for short comments only. Use the forum for more discussions.
Name
Email( not to be displayed)Privacy Policy
1+2=This is to prevent automatic submission by spammers. Please enter the result of the sum as asked



Join Our Email List
Email:  
For Email Newsletters you can trust
HTML . MySQL. PHP. JavaScript. ASP. Photoshop. Articles. FORUM Contact us

©2000-2014 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer