jquery custom rule,remote,extension validation

Posted Date:04-03-2017

In this Post we will explain how to use jquery custom rule,remote,extension validation in html form.

Step 1:Create mysql table name as users using following code

-- phpMyAdmin SQL Dump
-- version 3.5.2.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Jun 15, 2017 at 09:21 AM
-- Server version: 5.5.27
-- PHP Version: 5.4.7

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `chatigniter`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE IF NOT EXISTS `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `firstname` varchar(255) NOT NULL,
  `lastname` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `avatar` varchar(255) NOT NULL,
  `online` enum('1','0') NOT NULL DEFAULT '1',
  `created_at` datetime NOT NULL,
  `updated_at` datetime NOT NULL,
  `mobile` varchar(15) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Step 2: Include jQuery And Validation Plugin

<source src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></source >
<source src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></source>
<source src="https://cdn.jsdelivr.net/jquery.validation/1.15.0/additional-methods.min.js"></source>

Step 3:Create the HTML Form using  following code

<form action="" id="example" method="post">

   <label for="firstname">First Name</label>
   <input type="text" name="firstname" id="firstname" placeholder="Karthik"/>

   <label for="lastname">Last Name</label>
   <input type="text" name="lastname" id="lastname" placeholder="N"/>

   <label for="email">Email</label>
   <input type="email" name="email" id="email" placeholder="Email"/>
   <label for="email">Mobile</label>
   <input type="text" name="mobile" id="mobile" placeholder="Mobile"/>
  
   <label for="password">Password</label>
   <input type="password" name="password" id="password" placeholder="Password"/>
 	<label for="password">File</label>
   <input type="file" name="file" id="file"/>

   <button type="submit">Register</button>

 </form>

Step 4:Create jquery validation rule using following code

 
        // Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("#example").validate({
    // Specify validation rules
    rules: {
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        remote: {
          url: 'CustomValidation.php',
          type: "post",
          data: {
            email: function() {
              return $("#email").val();
            }
          }
        }
      },
     mobile: {
        required: true,
        remote: {
          url: 'CustomValidation.php',
          type: "post",
          data: {
            mobile: function() {
              return $("#mobile").val();
            }
          }
        }
      },
        password: {
        required: true,
        minlength: 5
      },
       file:{
      required: true,
      extension: "png,jpeg,jpg"
    }
    },
      messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: 
      {
      	required: "Please enter a valid email address",
      	remote:"Already Email  exists"
      },
      mobile: 
      {
      	required: "Please enter a valid mobile address",
      	remote:"Already Mobile number exists"
      },
      file: 
      {
      	extension:"Please select png,jpeg,jpg"
    	}
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});
    

In above script implementing remote,extension rules.In remote rule is checking with database values are exist or not,so we are create one page name as CustomValidation.php this page connect to database and checking value.

The following code for CustomValidation.php

<?php 
  
    $host     = "localhost";
    $user = "username";
    $password = "";
    $dbName	  = "databasename";
    $con = mysqli_connect($host, $user, $password);
    if (!$con) die("Unable to connect to MySQL: " . mysqli_error());
    mysqli_select_db($con, $dbName)
    or die("Unable to select database: " . mysqli_error());
/*Check Validation*/
/*Email Validation*/
if (isset($_POST['email']))
{
  
  $email=$_POST['email'];
  $query=mysqli_query( $con,"SELECT email FROM users where email='$email'");
    if (mysqli_num_rows($query)>0)
    {
    		echo "false";
        // return false;
    }
    else
    {
    		echo "true";
        // return true;
    } 
}
/*Mobile Validation*/
if (isset($_POST['mobile']))
{
  
  $mobile=$_POST['mobile'];
  $query=mysqli_query( $con,"SELECT mobile FROM users where mobile='$mobile'");
    if (mysqli_num_rows($query)>0)
    {
    		echo "false";
        // return false;
    }
    else
    {
    		echo "true";
        // return true;
    } 
}