Validating html forms with userid as we fill data using PHP and 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

Subscribe to our YouTube Channel here

Validation with onBlur event using PHP Ajax