• 1
• 2
• 3
• 4
• 5

action actions add address ajax array articles basic border browser button called calling change check class code color connect data database define die dieproblem display div divtd echo email emailfield empty equal error errors field fields form forvar function functions hcould highlight http id ifaction ifnum ifproblemarraylength loop message mysql mysqlqueryquery negative num number onblur onfocus option output page passed password php phpfreaksusers pipe place pos problemarray query remove required result return ro select set simple space specific start string style submit table td tdinput test testfield testoption text tr trim trimstring tutorial txtfield type understanding update url user userfield username validation var variable variables width

Keyword Cloud Navigation Map

Here is a simple, quick way to validate required form fields using AJAX, PHP and MySQL. What we’re going to do is display an error message to the right of the required field, and if there are errors, restrict the submit button. And if a user were to skip a required field, or leave it blank, we’ll highlight it along with removing the submit button.

I feel this is useful because it validates on the fly using PHP methods that we may already have in place – there is no need to learn the “Javascript way” to do something that you’ve been doing for a while. I make a few assumptions in this tutorial. The first is that you have a basic understanding of PHP and how to connect to a MySQL database and retrieve records. Along with that, for this tutorial, you’ll need a table setup with usernames and email addresses stored in it; my table will be called “users.” The second is that you have some understanding of how AJAX works. Third is that you have an understanding of CSS and how to define classes and id’s. You could figure these things about by going through this tutorial, but it would be a lot easier on you if you do understand what I laid out.

rnrnLets Get Started

We’re going to start by making the form and adding names, id’s and actions to the fields. In my example, there will be six form fields, four of them being required (three being regular fields, one being a dropdown box). And next to each required field, we’ll have an empty space that will be used to display a specific error message returned through AJAX. A simple check will be carried out against the database and an error message will be displayed if the field is already present. We also have an empty div to display either the error message or submit button for the form. You can add your fancy data checking later.

*In this example I will only check against the first two FROM fields; username and email address.

The field id is the most important element in this script. So we’ll be using a simple naming convention to keep the code clean and hopefully simple; *field* name=”xxx” id=”xxxfield” and the error container will have an id of xxxfield_container.

Read Full Tutorial...