Simple Registration Form Validation With jQuery and PHP

22 Jan , 2014  jQuery,PHP 

Form-Validation-With-jQuery-PHPThis tutorial teaches form validation with jQuery and PHP with the help of a jQuery form validation plugin. Pre-validation before submission of the form using jQuery.

In today’s tutorial, we are going to create a simple registration form. Then apply the jQuery validation plugin to validate the form for the inputs by the user before submission. This tutorial shows us how to pre-validated the form for the inputs by the user before submitting the form using jQuery. This can be a mock up of Ajax form validation.

Learn how to validate special characters in forms from our previous tutorial.

Form validation is useful for websites having to set up a registration form for their users who would like to sign up to the website. The users getting pre-registration errors before submitting the form can be useful. Today, we will do this by using the jQuery plugin – jQuery Validation Plugin.

The demo and download of form validation with jQuery and PHP can be found below:

DEMO | DOWNLOAD

Simple Registration Form Validation With jQuery and PHP

We have created the form using HTML and CSS3. We are not going into the details for of the form design and styling. The CSS for the form can be found in the download zip folder.

The Complete PHP Skeleton With HTML, CSS, jQuery:

Explanation Step by Step:

Apart from the PHP code, the above contains the HTML, CSS files, the jQuery files attached, the Registration form and the jQuery script which does some validation check at the client side. The respective codes from the above PHP skeleton are:

The Registration Form HTML Code:

The above code creates the below form without any CSS styles:

Raw-Registration-Form

The CSS styling for the Registration form:

The Form now becomes styled as shown below:

Styled-Registration-Form

The jQuery Plugin – jQuery Validation Plugin and jQuery Framework plugin

The PHP Code

In the above PHP, the different variables are declared like name, gender, address, email, username, password and the output. These are the different form variables we need. Now, we wait and capture for the input values in the form by the user using the declared variable in PHP. For Example, for the name input field, now the HTML will look like this:

After the values are captured, we need to remove the leading and trailing white-space using the below code:

The input trimmed values are then validated using the below code:

The errors which needs to be thrown, is pushed into an array. Here is the screenshot of how the errors appear on the web page:

Error-Output-Form

If the form is successfully posted, then we need to display the “Thank You” message, the code below does that:

The successful post submission message is shown on the screen using the below code:

Here is the screenshot of how it looks like in the browser when the form is successfully submitted:

Success-Output-Registration-Form

When the browser is ready, we make some client side validation using the jQuery script as shown below:

You can modify this PHP according to your convenience and requirements. Hope you enjoyed this tutorial. Please check the demo once again from below link.

DEMO | DOWNLOAD

Please do let us know if you have any doubts or clarifications regarding the codes here. Please don’t forget to like our page if you enjoyed this tutorial.



, , ,

  • Lories

    Thanks for this useful post! I’ve bookmarked for future reference.

  • dan

    how to send this? to email?

    • This is just a simple registration and validation using PHP and jQuery.

      We will write a new post to actually send the mail from your WordPress blog.

      Thanks for that.

      • dan

        I’ve already figured it out. Thanks