Email Availability using Parsley.js Custom Validator with PHP

This is another release in the Parsley.js JavaScript library. This library was used to validate the form data. In this publication, too, we will validate the form data using this Parsley.js library. But here we are going to do the Parsley.js personalized validation to check if a particular email is available to register in our system or not. This custom validator sends an Ajax request to the PHP script to check whether the respective email address or username is already registered or not. In summary, we will do a unique check of the email address or username with PHP using this custom Parsley.js validator.

A registration process is required in every web application to gain access to the web application. When registering, the user can then only register with a unique e-mail address or a unique user name. In order to restrict the user with the same e-mail address or the same user name, this live e-mail availability or the function for the availability of the user name is required at this time. At this point, if the user has entered their email address or user name in the form field, the system must check whether the entered email address or user name is already registered in our system or not. If the email address or username is already registered, the system must display an error message on the website. Otherwise, the system must give the user permission to continue with the registration.

Therefore, the availability of email in any web application is a required feature. And here we created this function using the Parsley.js form validation library. With this library, we create a custom validator to check whether the email is available for registration or not.

To ensure this live availability of emails, we used the Parsley.js library with PHP script, JQuery library and MySQL database. First we have to define in the text field and in this text field we have to define the validation attribute of the Parsley.js library, which you can see below.

Attribute                         Description

required                                             The value of this input field is required to transmit the form data.
data-parsley-type                            The value of the input element must be a valid email address data-parsley-trigger                                  A validation error is triggered in the focus event
data-parsley-checkemail                Here "checkemail" is the name of the custom validator data-parsley-checkemail-message                       The error of the custom validator "checkemail" is displayed

Above you saw which JavaScript attribute Parsley.js can be used to check the value of the email text field. Below is the full source for HTML, jQuery and PHP scripts where we created the custom validator Parsley.js to check the availability of the live email sending an Ajax request to the PHP Sent the script. You can find this full source code below.

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>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);
 }
}

?>