Ajax PHP Webpage form validation
Validation using PHP and Ajax solve all our problems. Main advantage is
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
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 dataWe have asked the user to give first name at input text box. The data entered by user can be collected by using this code.
Collecting radio button dataRead more on how to collect radio button data here. Here is the code what we have used inside our form data collection function.
Drop down select box dataThis is how we will collect the selected data option of a drop down list box.
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'
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
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 validationWe 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
Download the code of this demo
In next part we will discuss on code.php page.
Subscribe to our YouTube Channel here
This article is written by plus2net.com team. https://www.plus2net.com
|▼ Click for more tutorial on Ajax & PHP|