Prevent form submission in jQuery by ID

Question

I am using jQuery Ajax function to check the existence of user email in the database on jquery change function. in Ajax responsive there are two possibilities that either user email exists or not. If it exists it shows the error message. Now I wanted to prevent the form from submitting if the Ajax responsive is false

    jQuery("#userEmail").change(function(){
//my code goes here
    if(result == 'False'){
       //prevent form here 
     }
    else {
  // else condition goes here
     }

     });

Answer 1

You can put a global variable like

emailValidated = false

And on

jQuery("#userEmail").change(function(){
//my code goes here
  if(result == 'False'){
   emailValidated = false;
  }
  else {
  // else condition goes here
    emailValidated = true;
  }

 });

After that on form submit check the value of the emailValidated variable.

$(form).submit(function(){
  if(emailValidated) {
     this.submit();
  }
  else {
    return false;
  }
})

Answer 2

Use e.preventDefault() to prevent form from submission.

jQuery("#userEmail").change(function(e){
    if(result == 'False'){
      e.preventDefault();
     }
    else {
     }   
  });

Answer 3

You need use the submit event handler:

jQuery("#userEmail").closest("form").submit(function(event){
    var $email = jQuery("#userEmail", this);

    //the email field is not `this`, but `$email` now.

    //your code goes here
    if(result == 'False'){
       event.preventDefault();
     }
    else {
       // else condition goes here
    }

});

You can still attach other behaviours to the change event if needed. The important thing is to do event.preventDefault() on the submit event.

Answer 4

Do something like this:

var result;

$.ajax({
  url: url,
  // Put all the other configuration here
  success: function(data){
    if(data == something) // replace something with the server response
      result = true; // Means that the user cannot submit the form
  },
});

$('#formID').submit(function(){
  if(result){
    alert('Email already exists.');
    return false;
  }
});

Answer 5

• Steps are like :
  1. get the email value passed by the user from input field in Jquery.
  2. The POST that data to your PHP query file and get the response data on "success: function(data)" function of jquery.
  3. Display that data data on the page..

Check below link for a reference. http://www.sitepoint.com/jquery-ajax-validation-remote-rule/