jQuery validation message not displaying while checking the email exist or not

Question

I am using jQuery validator for validation the form.I am checking the email id is already exist or not in the database which is working perfectly. I am getting output in the Network->Response tab.

The issue is I am not able to display that validation error message in the form. I also set the message rule but that is not displaying.

Would you help me out in this? Check below image.

Form

<form name="form1" method="post" action="demo1.php">
  <input type="text" name="name" id="name" placeholder="name"><br />
  <input type="email" name="email" id="email" placeholder="email"><br />
  <input type="text" name="mobile" id="mobile" placeholder="mobile no"><br />
  <input type="submit" name="submit" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<script  src="assets/js/test.js"></script>

test.js

// When the browser is ready...
  $(function() {
    $("form[name='form1']").validate({
      // Specify the validation rules
      rules: {
        name:{
          required: true,
          minlength: 3,
          maxlength: 50
        },
        email: {
          required: true,
          email: true,
          remote: {
            url: "process?key=emailalready_register",
              type: "post"
            }
          },
          mobile: {
            required: true,
            number: true,
            minlength: 10,
            maxlength: 10
          }
        },
        messages: {
          email: {remote: "Email already in use!"}
        },
        submitHandler: function(form) {
        form.submit();
      }           
    });    
  });

Process.php

function emailalready_register($conn){
  if(isset($_POST['email'])) {
    $email =$conn->real_escape_string(trim($_POST['email']));
    $sql_check_email="SELECT email FROM register WHERE email =?";
    $stmt = $conn->prepare($sql_check_email);
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->bind_result($email);
    $rows = $stmt->fetch();
    $total_rows = count($rows);
    if( $total_rows > 0 ){
      echo 'Already exsist';
    } else {
      echo 'Not exsist';
    }
    $stmt->close();
    $conn->close();
  }   
}

nikita · Accepted Answer · 2017-10-04 05:50:33Z

0

Try this:-

$(function() {
    $("form[name='form1']").validate({
      // Specify the validation rules
      rules: {
        name:{
          required: true,
          minlength: 3,
          maxlength: 50
        },
        email: {
          required: true,
          email: true,
          remote: "process?key=emailalready_register",

          },

          mobile: {
            required: true,
            number: true,
            minlength: 10,
            maxlength: 10
          }
        },
        messages: {
          email: {remote: "Email already in use!"}
        },
        submitHandler: function(form) {
        form.submit();
      }           
    });    
  });

Process .php

function emailalready_register($conn){
  if(isset($_POST['email'])) {
    $email =$conn->real_escape_string(trim($_POST['email']));
    $sql_check_email="SELECT email FROM register WHERE email =?";
    $stmt = $conn->prepare($sql_check_email);
    $stmt->bind_param("s", $email);
    $stmt->execute();
    $stmt->bind_result($email);
    $rows = $stmt->fetch();
    $total_rows = count($rows);
    if( $total_rows > 0 ){
      echo 'false';
    } else {
      echo 'true';
    }
    $stmt->close();
    $conn->close();
  }   
}

answered Oct 4, 2017 at 5:50

nikita

4043 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nikita Over a year ago

Welcome @NarendraVerma :)

Jerry U · Accepted Answer · 2017-10-03 02:39:09Z

0

Your PHP file is supposed to return true or false.

edited Oct 3, 2017 at 2:39

answered Oct 3, 2017 at 2:23

Jerry U

63610 silver badges22 bronze badges

4 Comments

Naren Verma Over a year ago

You mean to say I have to use echo 'true' or echo 'false'in my process page? I tried that If I used then validation not working.

Jerry U Over a year ago

try adding async: false after type: post

Daerik Over a year ago

Not true.

If the serverside response is a string, eg. "That name is already taken, try peter123 instead", this string will be displayed as a custom error message in place of the default.

jqueryvalidation.org/remote-method

Naren Verma Over a year ago

@styl3r, It's not working, Page is redirecting demo1.php after clicked on submit.

Blues Clues · Accepted Answer · 2017-10-03 02:44:35Z

0

You can put a div in your html and target to output the message, like so:

<div class="messages"></div>

answered Oct 3, 2017 at 2:44

Blues Clues

1,9184 gold badges40 silver badges84 bronze badges

2 Comments

Blues Clues Over a year ago

What is that remote validation for?

Naren Verma Over a year ago

You can check jqueryvalidation.org/remote-method which is suggested by Daerik

Suchit kumar · Accepted Answer · 2017-10-04 05:43:48Z

Note: The url given in your email check is wrong.

Change your test.js to this:

$(function() {
    $("form[name='form1']").validate({
      // Specify the validation rules
      rules: {
        name:{
          required: true,
          minlength: 3,
          maxlength: 50
        },
        email: {
          required: true,
          email: true,
          remote: {
            url: "process.php",
           type: "post",
           dataFilter: function(data) {
                      var json = JSON.parse(data);
                      return "\"" + json.msg + "\"";
           }
            }
          },
          mobile: {
            required: true,
            number: true,
            minlength: 10,
            maxlength: 10
          }
        },
        messages: {
          email: {remote: "email is in use!"}
        },
        submitHandler: function(form) {
        form.submit();
      }           
    });    
  });

Change your process.php to this:

<?php 

    /* if(isset($_POST['email'])) {
        //make your $conn available here
        $email =$conn->real_escape_string(trim($_POST['email']));
        $sql_check_email="SELECT email FROM register WHERE email =?";
        $stmt = $conn->prepare($sql_check_email);
        $stmt->bind_param("s", $email);
        $stmt->execute();
        $stmt->bind_result($email);
        $rows = $stmt->fetch();
        $total_rows = count($rows);
        if( $total_rows > 0 ){
            echo json_encode(array("msg"=>"Already exists"));
        } else {
            echo json_encode(array("msg"=>"Not exists"));
        }
        $stmt->close();
        $conn->close();
    }
 */

echo json_encode(array("msg"=>"Already exists"));

Note: this is for demo of the message so it will always show "Already exists". comment the last line and un-comment the rest of process.php and check.Please look for the process.php code and check if it is working properly or not.

Collectives™ on Stack Overflow

jQuery validation message not displaying while checking the email exist or not

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related