Web page html Form Validation using Ajax PHP with demo

We will learn how to validate a Web page form using PHP and Ajax. Form validation can be done by using PHP at server side. Similarly it can be done by using JavaScirpt at client side. Validation using server side has some advantage over client side JavaScript validation, same way validating in server side mean the page need to reload and all data has to travel back to server. We also need to send back the data to form with the error message as user need not type or enter data again. We can't depend on client side JavaScript only as it can be disabled by the client and not a full proof method to rely upon.

Validation using PHP and Ajax solve all our problems. Main advantage is

Page need not reload , only required data can be posted to server
This helps in increase in speed and better user experience
No need to post back the data from the server as we are not refreshing the page.
We get all the power of server side by taking the data to server. Some task like checking the availability of userid in a membership table can't be done by client side JavaScript alone.

Related Tutorial
• Ajax Validation onBlur

In our tutorial to lean we will use one each of all the form components. One text box , one set of radio buttons, one drop down list box and one checkbox will be used in our example so you can learn how to handle all type of components and use them as per your requirement.

Here is the demo of PHP Ajax form validation

In this demo two files are used one is ajax-form-validation-demo.php and other one is ajax-form-validation-demo-code.php. Our ajax-form-validation-demo.php file stores all the Ajax and JavaScript codes along with the html form which is be validated. The file ajax-form-validation-demo-code.php file contains php code which receives the data and check the data. After checking generates the error message and returns them to main file ( form.php ).

Please check the demo fist to see what are the html form components used.
You can also read how to handle the basic Ajax function and form data.

Let us see how the different form component are handled and data is sent by POST method. We will start with our text data.

In our form getFormData we have kept the code to collect the data. We used one array myParameters and to this we will add our form data.

Collecting the text entered data

We have asked the user to give first name at input text box. The data entered by user can be collected by using this code.

//// Text field data collection //

var val=myForm.fname.value;

val = "fname="+val;

myParameters.push(val);

// End of text field data collection //

Collecting radio button data

Read more on how to collect radio button data here. Here is the code what we have used inside our form data collection function.

//////// Radio Button data collection //////

var val="";

for(var i=0; i < document.myForm.sex.length; i++){

if(document.myForm.sex[i].checked){

var val=document.myForm.sex[i].value; 

}

}

var sParam = encodeURIComponent('sex'); 

sParam += "="; 

sParam += encodeURIComponent(val); 

myParameters.push(sParam); 

///////End of radio button data collection/////////

Drop down select box data

This is how we will collect the selected data option of a drop down list box.

////// Start of select box data collection //

var val=myForm.month.options[myForm.month.options.selectedIndex].value;

val = "month="+val;

myParameters.push(val);

////////End of select box data collection /////////////

Checkbox checked or not.

We will collect the associated value of checkbox , if the user has not checked the checkbox then the variable will be null. If it is checked then the value will be 'yes'

////// Start of check box data collection //

if(document.myForm.agree.checked){

var val = "agree="+document.myForm.agree.value;

myParameters.push(val);

}

////End of checkbox data collection //

We have used array join to create a string with all these data and now we will send all the form data by POST method.

We will use one message div tag msgDep to display to display error message etc. You can read more on how to manage message while using Ajax here.

The data we have posted will be processed through our PHP script and will be returned to our main page by using JSON string. Try to learn about JSON string here. We will discuss how to process the JSON string here.
Json string has different elements and its values stored inside it. If the radio button is validation is OK then it will have the status as

if(myObject.data[0].r1==="F") // Radio button validation failed 

{

document.getElementById("r1").style.borderStyle='solid';

document.getElementById("r1").style.borderWidth='1px';

document.getElementById("r1").style.borderColor='red';

}else{

document.getElementById("r1").style.borderStyle='solid';

document.getElementById("r1").style.borderWidth='1px';

document.getElementById("r1").style.borderColor='white';

}

Above code will change the border style of the radio button div tag to red. If the validation is passed then border color is set to white. You can learn more on CSS border style here.

Like above code we can extend our border color changes to other element of the form. Note that each form element has one div tag which we will be using to change the color in to match the validation of the element.

Status of form validation

We have one element status_form which is set to OK or NOTOK based on the validation of total form is cleared or not. This we will use to decorate the message box. If the validation is passed then we will keep the message box border color as blue and display a message saying validation is passed.
If validation is failed then the message box color we will make it to red and display the messages received from the PHP code inside the message box. Here is the code of that

if(myObject.data[0].status_form==="NOTOK"){ // status of form if notok

document.getElementById("msgDsp").style.borderColor='red';

document.getElementById("msgDsp").innerHTML=myObject.data[0].msg;

}/// end of if if form status is notok

else {

document.getElementById("msgDsp").style.borderColor='blue';

document.getElementById("msgDsp").innerHTML=" Validation passed ";

} // end of if else if status form notok

Download the code of this demo

In next part we will discuss on code.php page.

Subscribe to our YouTube Channel here

Ajax PHP Webpage form validation