Ajax form Validation and Submission is not working

Question

Input field validation is working properly but can't get the ajax submission. Where is the bug behind my jquery code snippet?

$(document).ready(function() {

  $("#eValidate").live("click", function() {

    if (!ValidateEmail($("#InputEmail").val())) {

      $('#InputEmail').val("");

      return false;
    }
  });
  var email = $('#InputEmail').val();
  $.ajax({
    type: "POST",
    url: "emailvalidate.php",
    data: 'iEmail=' + email,
    success: function(data) {

      $("#eValidate").prop('disabled', true);

    }
  });
});

function ValidateEmail(email) {
  var expr = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
  return expr.test(email);
}

<form id="nfrm" name="nfrm" action="">
  <div style="color:#FFF">
    <label for="InputEmail">Input Email</label></div>
  <div class="form-group form-inline">
    <input class="form-control mr-sm-3" id="InputEmail" type="text" placeholder="Type your e-mail id here |" autocomplete="off"><span></span>
    <button class="btn btn-outline-notify my-2 my-sm-2" id="eValidate" style="background-color: #e5e6e7;" type="submit"><img src="asset/btn1.svg" width="20" height="20" class="d-inline-block mr-sm-1">NOTIFY ME</button>
  </div>
</form>

.live is deprecated for .on and you need to move the into the click — mplungjan, May 08 '17 at 16:22

score 0 · Answer 1 · edited May 08 '17 at 16:30

0

The ajax code must be written inside the live method. Code corrected as follows.

$(document).ready(function() {

    $("#eValidate").live("click", function () {

        if (!ValidateEmail($("#InputEmail").val())) {

           $('#InputEmail').val("");

           return false;
           }

    var email = $('#InputEmail').val();
         $.ajax({
           type: "POST",
           url: "emailvalidate.php",
           data:'iEmail='+email,
           success: function(data){

           $("#eValidate").prop('disabled', true);

           }
         });
});

    });

edited May 08 '17 at 16:30

mplungjan

169,008
28
173
236

answered May 08 '17 at 16:22

Houssam Hamdan

888
6
15

@mplungjan regardless of the inside logic, the main issue is clear here. Thanks. – Houssam Hamdan May 08 '17 at 16:26

score 0 · Answer 2 · edited May 23 '17 at 12:02

use .on instead of .live What's the difference between `on` and `live` or `bind`?
move the ajax to the click
test if the ajax is at all needed
Why do you not disable based on return result?

$(function() {
  $("#eValidate").on("click", function() {
    var email = $.trim($("#InputEmail").val());
    if (ValidateEmail(email)) {
      $.ajax({
        type: "POST",
        url: "emailvalidate.php",
        data: 'iEmail=' + email,
        success: function(data) {
          $("#eValidate").prop('disabled', true); // do you want to disable always?
          // if not use 
          // $("#eValidate").prop('disabled', data!="OK");
        }
      });
    } else {
      $("#InputEmail").val("");
    }
  });
});

score 0 · Answer 3 · answered May 08 '17 at 17:07

@mplungjan - It's not working even after implementing your code.I did like this

function ValidateEmail(email) {
var expr =  /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;
        return expr.test(email);
}
$(function() {
  $("#eValidate").on("click", function() {
    var email = $.trim($("#InputEmail").val());
    if (ValidateEmail(email)) {
      $.ajax({
        type: "POST",
        url: "emailvalidate.php",
        data: 'iEmail=' + email,
        success: function(data) {
           alert("Success!");

        }
      });
    });
    else {
      $("#InputEmail").val("");

    }
});

AGAIN - Please do not use an answer to comments please delete this and update your question — mplungjan, May 08 '17 at 17:46

Ajax form Validation and Submission is not working

3 Answers3