Enter your keyword

Web Forms: Validation, Submission, and Processing

Web Forms: Validation, Submission, and Processing

Web Forms: Validation, Submission, and Processing

In this tutorial, I want us to try something rather very popular in web programming but still comes as a challenge to some coders. I’m going to demonstrate how to handle forms in web applications, from creation of the forms with Bootstrap, validating the form with jQuery Form Validator plugin, submitting the form data using Ajax, and processing this data in PHP & MySQL RBMS, and finally handling the feedback from the form processing feed back from PHP.

Let’s start with creating a simple User Registration form using Twitter Bootstrap which is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites. Our form will look like this;

Form preview

Form Validation

With the form ready, let’s add some validation to it using jQuery validator. For validating this form, I  extended the plugin with a custom function “regex” and it will be used to validate a field based on a particular regex pattern. For example; below is a regex pattern to enforce a password String to be alphanumeric and 8-16 characters long

Commonly when registering users on your website, you will want to check the user is not already registered. This can be achieved by checking if the user’s provided email address is not existent in the database.

To demonstrate this, we have to create a simple MySQL database like this

Next, the PHP script that will search the MySQL database to find if the provided email already exists in the user table or not

The jQuery Validator plugin uses the remote method to process url request. Note: the url script must return a String not Json, nor a Boolean

To validate confirm password field, we use the jQuery validator plugin equalTo method and we provide the id of the field whose value is to be compared with.

Below is the complete form validation code snippet

Form Submission

Our form has no ‘type – submit’ input simply because we don’t want to reload the page during submission. Instead we use a simple ‘type – button’ input to submit the form data.
We handle an onClick event listener to serialize the form and submit the form data using Ajax to the form processing script.

Form Processing

Now that validation is in place, lets write the script that will process our form data

Handle Processing Result

Handle form processing feedback, show any errors that might rise from the processing (not validation) plus show success message and refresh form.

This have been a quite lengthy tutorial but is no better way to tackle this challenge plus I don’t like the idea of separating the same topic into many tutorials.
Anyway, I hope you can wrap you head around it and understand the in-depth explanations. Else feel free to leave me a comment in the comment section particularly regarding this very tutorial, or hit the contact page for any further unrelated inquires.

Download Source Code