আগামী ২৩ অক্টোবর -২০১৭ তারিখ থেকে শুরু হচ্ছে পাঁচ মাস ব্যাপী Professional Web Design and Development with HTML,CSS,Bootstrap,PHP,MySQl, AJAX and JQUERY কোর্সের ৮৬ তম ব্যাচ। আগ্রহীদেরকে অতিসত্বর মাসুদ আলম স্যার এর সাথে যোগাযোগ করতে অনুরোধ করা যাচ্ছে। স্যার এর মোবাইল: 01722817591, Email : [email protected] কোর্সের সিলেবাস এর জন্য এখানে ক্লিক করুন ।

Simple Registration Form With JQUERY Validation and PHP

JQUERY Registration Form

There are several jquery plugin to validate form data but what I prefer is definitely Validation .

The reasons for my preference lies with this plugin are many, but among them those that I consider most important are:

  • availability of a wide range of methods “build-in” , that is already present basic validations to perform the “standard” (the required fields, email validation, etc..).
  • possibility of introducing a simple new custom validation methods (eg validation through regular expressions ).
  • ability to perform validations using ajax .

In this tutorial we will examine these three aspects consulted for further details on the official page of the Validation plugin .

First Create a Users Table For User Availability Check Using JQUERY



CREATE TABLE IF NOT EXISTS `users` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `username` varchar(255) NOT NULL,
 `email` varchar(255) NOT NULL,
 `web` varchar(200) NOT NULL,
 `date_of_birth` date NOT NULL,
 `password` varchar(255) NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `username`, `email`, `web`, `date_of_birth`, `password`) VALUES
(1, 'masud', '[email protected]', 'http://www.w3programmers.com', '0000-00-00', 'e10adc3949ba59abbe56e057f20f883e');

Let’s start registration.php Form:

</b>

<html>

<head>

<title>JQUERY Form Validation</title>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- jquery validation plugin //-->

<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>

<script type="text/javascript" src="validation_reg.js"></script>

<link rel="stylesheet" href="style.css" type="text/css" />

<style type="text/css">

.hidden{

display:none;

}

</style>



</head>

<body>

<form action="registration_process.php" method="post" id="form_register">

<fieldset>

<legend>Registration<legend>

<label for="reg_name">Name*</label>

<input type="text" name="name" id="reg_name" />


<label for="reg_user">Username*</label>

<input type="text" name="username" id="reg_user" />

<label for="reg_email">Email*</label>

<input type="text" name="email" id="reg_email" />

<label for="reg_web">Website*</label>

<input type="text" name="web" id="reg_web" />

<label for="reg_date">Date of Birth*</label>

<input type="text" name="date" id="reg_date" />

<label for="reg_pass1">Password*</label>

<input type="password" name="pass1" id="reg_pass1" />

<label for="reg_pass1">Confirm Password*</label>

<input type="password" name="pass2" id="reg_pass1" />

<input type="submit" name="register" value="Registraion" id="reg_submit" />

<input type="reset" name="Cancel" value="Cancel" id="reg_reset" />

</fieldset>

</form>

</body>

</html>

The validation we will do the following:

  • username:
  1. mandatory;
  2. with a minimum length of 3 characters;
  3. syntax check using a custom method (one of my regex specification);
  4. Verify that it is not already a registered user (ajax).
  • email:
  1. mandatory;
  2. syntax check using a validated method of Built-in;
  3. Verify that it is not an email has already been registered (ajax).
  •  Website
  1. mandatory;
  2. syntax check using a validated method of Built-in;
  • Date of Birth
  1. mandatory;
  2. syntax check using a validated method of Built-in;
  • Password
  1. Mandatory;
  2. With a minimum length of 8 characters.
  • Confirm Password
  1. Correspondence between the two passwords

 

Before we move on let’s see in detail the following validation in term general mode of implementation of the plugin.

Basic Operation

In order to validate each field should indicate the rules , ie the validation rules, specifying methods (build-in or custom) to be applied. And you can (optional but preferable) indicate the messages , or error messages for each field and method validation applied.

We will have, therefore, an exemplary implementation of this type:

$(document).ready(function()

{

$("#form_register").validate(

{

rules:{

'name':{

required: true,

minlength: 1

},

'username':{

required: true,

minlength: 3,

username_regex: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'email':{

required: true,

email: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'web':{

required: true,

url: true

},

'date':{

required: true,

date: true

},

'pass1':{

required: true,

minlength: 8

},

'pass2':{

equalTo: '#reg_pass1'

}

},

messages:{

'name':{

required: "The name field is mandatory!",

minlength: "Choose a username of at least 1 letters!",

},

'username':{

required: "The username field is mandatory!",

minlength: "Choose a username of at least 4 letters!",

username_regex: "You have used invalid characters. Are permitted only letters numbers!",

remote: "The username is already in use by another user!"

},

'email':{

required: "The Email is required!",

email: "Please enter a valid email address!",

remote: "The email is already in use by another user!"

},

'web':{

required: "The Web Address is required!"

},

'pass1':{

required: "The password field is mandatory!",

minlength: "Please enter a password at least 8 characters!"

},

'pass2':{

equalTo: "The two passwords do not match!"

}

}

});

});

The methods build-in

The types of validation that we perform on our form often recur. For example: mandatory field, minimum and maximum length of a field, the validation of the email address or a URL, etc etc..

For all these kind of validations ” standard “Validate plugin has methods ready to use.

In this tutorial between the build-in methods available will apply:

  • required : the parameter is true and which determines that a field is mandatory;
  • minlength : the parameter of which is simply an integer indicating the minimum length;
  • email : whose parameter is true, and checks the syntax of the email address;
  • equalTo : whose parameter is the field to be compared in order to verify the correspondence between the two camps.
  • url: whose parameter is true, and checks the syntax of the web address;
  • ‘date’: whose parameter is true, and checks the date;
  •  

Obviously for additional methods, please refer to the official documentation.

With these methods,rules and error messages we can implement the plugin, with the file validation_reg.js , in the following way:

$(document).ready(function()

{


$("#form_register").validate(

{

rules:{

'name':{

required: true,

minlength: 1

},

'username':{

required: true,

minlength: 3,

username_regex: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'recaptcha_response_field':{

required: true,

captchaCheck: true,

},

'email':{

required: true,

email: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'web':{

required: true,

url: true

},

'date':{

required: true,

date: true

},

'pass1':{

required: true,

minlength: 8

},

'pass2':{

equalTo: '#reg_pass1'

}

},

messages:{

'name':{

required: "The name field is mandatory!",

minlength: "Choose a username of at least 1 letters!",

},

'username':{

required: "The username field is mandatory!",

minlength: "Choose a username of at least 4 letters!",

username_regex: "You have used invalid characters. Are permitted only letters numbers!",

remote: "The username is already in use by another user!"

},

'email':{

required: "The Email is required!",

email: "Please enter a valid email address!",

remote: "The email is already in use by another user!"

},

'web':{

required: "The Web Address is required!"

},

'pass1':{

required: "The password field is mandatory!",

minlength: "Please enter a password at least 8 characters!"

},

'pass2':{

equalTo: "The two passwords do not match!"

}

}

});

});

Extend the plugin and add new validation method

In some cases it may happen that the type of validation that we need is not available in the build-in methods and therefore it will be necessary to implement it.

In essence must create an additional validation method in addition to those already present. To do this, use the function addMethod .

The function takes three parameters addMethod the third of which is optional: the name of the method, the function that performs the validation and error message by default (that is, the error message that appears in the event of failure to define the messages).

In particular, the function that will perform the validation parameters such as the value of the field to be validated, element (boolean value) and any parameters.

In our specific case, we need to validate the syntax of the user name with a regex (regular expression) .

Therefore, we will create a method, called username_regex :

$.validator.addMethod("username_regex", function(value, element) {

return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);

}, "Please choise a username with only a-z 0-9.");

At this point within the rules, in addition to the build-in methods, we can use our new method username_regex. And also add jquery date picker in our date_of_birth field, See below Updated Full Code For validation_reg.js file:

$(document).ready(function()

{


// my method for validate username

$.validator.addMethod("username_regex", function(value, element) {

return this.optional(element) || /^[a-z0-9\.\-_]{3,30}$/i.test(value);

}, "Please choise a username with only a-z 0-9.");


$( "#reg_date" ).datepicker({

changeMonth: true,

changeYear: true

});

$("#form_register").validate(

{

rules:{

'name':{

required: true,

minlength: 1

},

'username':{

required: true,

minlength: 3,

username_regex: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'recaptcha_response_field':{

required: true,

captchaCheck: true,

},

'email':{

required: true,

email: true,

remote:{

url: "validatorAJAX.php",

type: "post"

}

},

'web':{

required: true,

url: true

},

'date':{

required: true,

date: true

},

'pass1':{

required: true,

minlength: 8

},

'pass2':{

equalTo: '#reg_pass1'

}

},

messages:{

'name':{

required: "The name field is mandatory!",

minlength: "Choose a username of at least 1 letters!",

},

'username':{

required: "The username field is mandatory!",

minlength: "Choose a username of at least 4 letters!",

username_regex: "You have used invalid characters. Are permitted only letters numbers!",

remote: "The username is already in use by another user!"

},

'email':{

required: "The Email is required!",

email: "Please enter a valid email address!",

remote: "The email is already in use by another user!"

},

'web':{

required: "The Web Address is required!"

},

'pass1':{

required: "The password field is mandatory!",

minlength: "Please enter a password at least 8 characters!"

},

'pass2':{

equalTo: "The two passwords do not match!"

}

}

});

});

Validations with ajax

The ease with which you can perform validations using ajax is, in my opinion, the biggest advantage provided by this plugin.

In the case of our registration form we will have to avoid recordings username or email address already used by other users . This can only be verified through a request on the server side (with php).

Within the rules of the method that is going to use the remote  which will allow us to make asynchronous requests to the server side, ie  AJAX . It takes as a parameter obbligatoro the url of the file to which direct the request but optionally you can also provide other data (such as the method of sending a POST or GET).

We shall, therefore, first create a php file in which to address these requests.

Quite simply, we will create a file that will call validatorAJAX.php which will:

<?php

// db connection

$connection = mysqli_connect('localhost', 'root', '','test') or die(mysql_error());

// function to verify the existence of usernames

function isset_username($username){

global $connection;

$username = trim($username);

$query = "SELECT COUNT(*) AS num FROM users WHERE username='" .mysqli_real_escape_string($connection,$username). "'";

$result = mysqli_query($connection,$query);

$row = mysqli_fetch_array($result);

if($row['num']>=1){

return TRUE; // true if user exists

}

else{

return FALSE;

}

}


//function to verify the existence of the email

function isset_email($email){

global $connection;

$email = trim($email);

$query = "SELECT COUNT(*) AS num FROM users WHERE email='" .mysqli_real_escape_string($connection,$email). "'";

$result = mysqli_query($connection,$query);

$row = mysqli_fetch_array($result);

if($row['num']>=1){

return TRUE; // true if user exists

}

else{

return FALSE;

}

}


/*

We complete AJAX request

*/

if(isset($_POST['username'])){

if(!isset_username($_POST['username'])){

echo 'true';

}

else{

echo 'false';

}

}

else if(isset($_POST['email'])){

if(!isset_email($_POST['email'])){

echo 'true';

}

else{

echo 'false';

}

}

?>

Customize errors

The errors appear below the input field in a tag  label class = “error”  and these will be customizable via CSS. For example in the demo was adopted the following styles:

body{

font-family: Arial;

text-align: center;

}


#form_register{

text-align: left;

background-image: url('background.jpg');

-moz-border-radius: 10px 10px 10px 10px;

-webkit-border-radius: 10px 10px 10px 10px;

border-radius: 10px 10px 10px 10px;

width: 330px;

margin-left: auto;

margin-right: auto;

padding: 0 1.5em 1.5em 1.5em;

margin: 0 auto;

overflow: hidden;

}

#form_register fieldset{

border: none;

}

#form_register legend{

display: block;

font-size: 25px;

padding: 10px;

}


#form_register label{

padding: 0px;

display: block;

font-size: 0.6em;

margin: 20px 0px 0px 0px;

}


/*LABEL CREATED TO VALIDATE*/

#form_register label.error{

color: #f33;

padding: 0;

margin: 2px 0 0 0;

font-size: 0.5em;

padding-left: 18px;

background-image: url('error.png');

background-position: 0 0;

background-repeat: no-repeat;

}


/*input text and password*/

#form_register #reg_user, #form_register #reg_email, #form_register #reg_pass1, #form_register #reg_pass2{

height: 30px;

width: 200px;

display: block;

border: none;

font-size: 16px;

line-height: 28px;

}

/*input type submit and reset*/

#form_register #reg_submit,     #form_register #reg_reset{

height: 30px;

width: 220px;

color: #fff;

font-weight: bold;

opacity: 0.7;

border: 1px solid #999;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px;

-moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .6);

-webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .6);

box-shadow: 0 0 .5em rgba(0, 0, 0, .6);

-webkit-appearance: none;

-moz-transition: opacity .5s;

-webkit-transition: opacity .5s;

-o-transition: opacity .5s;

transition: opacity .5s;

display: block;

}

#form_register #reg_submit{background: #0a0; margin-top: 40px;}

#form_register #reg_reset{background: #f33; margin-top: 20px;}

#form_register #reg_submit:hover,

#form_register #reg_submit:active,

#form_register #reg_reset:hover,

#form_register #reg_reset:active{

cursor: pointer;

opacity: 1;

}


See Demo Screen Shots

Jquery Authentication

Jquery Username Availability and Email Availbility Check

Jquery Date

Download

Simple Registration Form With JQUERY Validation and PHP

Hi, My name is Masud Alam, love to work with Open Source Technologies, living in Dhaka, Bangladesh. I graduated in 2009 with a bachelor's degree in Engineering from State University Of Bangladesh, I'm also a Certified Engineer on ZEND PHP 5.3, I served my first five years a number of leadership positions at Winux Soft Ltd, SSL Wireless Ltd, CIDA and MAX Group where I worked on ERP software and web development., but now i'm a co-founder and Chief Executive Officer and Managing Director of TechBeeo Software Consultancy Services Ltd. I'm also a Course Instructor of ZCPE PHP 7 Certification and professional web development course at w3programmers Training Institute - a leading Training Institute in the country.
2 comments on “Simple Registration Form With JQUERY Validation and PHP

Leave a Reply

Your email address will not be published. Required fields are marked *