Parsley.js Custom Validator for Email Availability with PHP

This is one more post on Parsley.js JavaScript library, this library has been used for validate form data. In this post also, we will also validate form data by using this Parsley.js library. But here we will make Parsley.js custom validation for check particular email is available for register in our system or not. This custom validator will send ajax request to php script, for check particular email address or username is already register or not. In short, we will make unique email address or username validation with PHP by using this Parsley.js custom validator.

In any web application, Registration process is required for get access into web application. So, in registration, user can register only with unique email address or username. So, for restrict to user with same email address or username then at that time this live email availability or username availability feature is required. When user has enter his email address or username in form field , then at that time system has to check entered email address or username is already register in our system or not. If Email Address or username already register then system has to display error message on web page, otherwise system has give permission to user for proceed for registration.

So, Email Availability is required feature in any web application. And here we have make this feature by using Parsley.js form validation library and by using this library here we will make custom validator for check email is available for registration or not with PHP script.

For make this live email availability feature, here we have use Parsley.js library with PHP script, jquery library and Mysql database. First we have define on textbox and in this textbox we have to define Parsley.js library validation attribute which you can see below.

Attrbute	Description
required	Value of this input field is required for submit form data.
data-parsley-type	Value of input element must be a valid email
data-parsley-trigger	It will trigger validation error on focusout event
data-parsley-checkemail	Here "checkemail" is the name of custom validator
data-parsley-checkemail-message	It will display "checkemail" custom validator error

Above you have seen which Parsley.js javascript attribute for validate email textbox value. Below you can find complete source of HTML, jQuery and PHP script in which we have make Parsley.js custom validator for check live email availability which has send ajax request to PHP script. This all source code will you can find below.

View Demo

Source Code

Database

--
-- Database: `testing`
--

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

--
-- Table structure for table `register_user`
--

CREATE TABLE `register_user` (
  `register_user_id` int(11) NOT NULL,
  `user_name` varchar(250) NOT NULL,
  `user_email` varchar(250) NOT NULL,
  `user_password` varchar(250) NOT NULL,
  `user_activation_code` varchar(250) NOT NULL,
  `user_email_status` enum('not verified','verified') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `register_user`
--

INSERT INTO `register_user` (`register_user_id`, `user_name`, `user_email`, `user_password`, `user_activation_code`, `user_email_status`) VALUES
(1, 'John Smith', 'web-tutorial@programmer.net', '$2y$10$ZFXBzg3rzusgSFuAL.VeneDnJJpUVEMtEy2r2Xjshz/3O/wxSDQZa', 'c74c4bf0dad9cbae3d80faa054b7d8ca', 'verified'),
(2, 'John Smit', 'johnsmith@gmail.com', '$2y$10$n0ckpdEkvGVhX5GExG1ZD.Vg3Z1TEpMEoq12aEMCKVNFzXRSeOJ.q', '84b069ebd287d467cb7fd26e53c6a0c9', 'verified'),
(3, 'John Smith', 'peterparker@gmail.com', '$2y$10$CaXjutIQ2gYrvGwvuN3tJey36n.DNHVXtro11RFpnoRGHAaCf0FZ2', '2459e63c0cc08d3717f1e159de44586e', 'verified');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `register_user`
--
ALTER TABLE `register_user`
  ADD PRIMARY KEY (`register_user_id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `register_user`
--
ALTER TABLE `register_user`
  MODIFY `register_user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

index.php

<!DOCTYPE html>
<html>
  <head>
    <title>Live Email Availability using Parsley.js Custom Validator with PHP</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/parsley.js/2.8.0/parsley.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style> 
      input.parsley-success,
       select.parsley-success,
       textarea.parsley-success {
         color: #468847;
         background-color: #DFF0D8;
         border: 1px solid #D6E9C6;
       }

       input.parsley-error,
       select.parsley-error,
       textarea.parsley-error {
         color: #B94A48;
         background-color: #F2DEDE;
         border: 1px solid #EED3D7;
       }

       .parsley-errors-list {
         margin: 2px 0 3px;
         padding: 0;
         list-style-type: none;
         font-size: 0.9em;
         line-height: 0.9em;
         opacity: 0;

         transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
         -moz-transition: all .3s ease-in;
         -webkit-transition: all .3s ease-in;
       }

       .parsley-errors-list.filled {
         opacity: 1;
       }
       
       .parsley-type,
       .parsley-required,
       .parsley-equalto,
       .parsley-pattern,
       .parsley-urlstrict,
       .parsley-length,
       .parsley-checkemail{
        color:#ff0000;
       }
    </style>
  </head>
  <body>
    <br />
    <br />
    <div class="container">
      <h3 align="center">Live Email Availability using Parsley.js Custom Validator with PHP</h3>
      <br />
      <br />
      <br />
      <div class="row">
        <div class="col-md-3">

        </div>
        <div class="col-md-6">
          <input type="text" id="email_address" class="form-control input-lg" required placeholder="Enter Email ID" data-parsley-type="email" data-parsley-trigger="focusout" data-parsley-checkemail data-parsley-checkemail-message="Email Address already Exists" />
        </div>
        <div class="col-md-3">

        </div>
      </div>
    </div>
  </body>
</html>
<script>
  $(document).ready(function(){
      
    $('#email_address').parsley();

    window.ParsleyValidator.addValidator('checkemail', {
      validateString: function(value)
      {
        return $.ajax({
          url:'fetch.php',
          method:"POST",
          data:{email:value},
          dataType:"json",
          success:function(data)
          {
            return true;
          }
        });
      }
    });

  });
</script>

fetch.php

<?php

//fetch.php;

if(isset($_POST["email"]))
{
 $connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");

 $query = "
 SELECT * FROM register_user 
 WHERE user_email = '".trim($_POST["email"])."'
 ";

 $statement = $connect->prepare($query);

 $statement->execute();

 $total_row = $statement->rowCount();

 if($total_row == 0)
 {
  $output = array(
   'success' => true
  );

  echo json_encode($output);
 }
}

?>