表单提交甚至电子邮件已显示Jquery的消息

Question

I am trying to validate email availability using jQuery and then show an email availability message.

The message is showing successfully but the form is also submitting. I just want if I get an email availability message then the form should not submit. How can I do this?

public function check_emailp()
{
  $email = $_POST['emailid'];
  $record['data']=$this->Home->check_emailsd($email);
  if ($record['data']=="taken")
  {
    echo "<span style='color:red'> Email already exit .</span>";
  }
  else
  {
    echo "<span style='color:green'> Email Availiable.</span>";
  }
}

function checkemailAvailability() {
  $("#loaderIcon").show();
  var url = '<?php echo base_url(); ?>';
  jQuery.ajax({
    url: url + 'index.php/register/check_emailp',
    data: 'emailid=' + $("#email").val(),
    type: "POST",
    success: function(data) {
      alert(data);
      $("#email-availability-status").html(data);
      $("#loaderIcon").hide();
    },
    error: function (){}
  });
}

  <form name="myForm"  id ="myForm" action="<?php echo site_url('register/update_info'); ?>" method="POST" enctype="multipart/form-data">
        <input type="text" name="email" id="email"  placeholder="Enter a Location" class="form-control" onBlur="checkemailAvailability()">
      </div>
      <?php //echo form_error('userName'); ?>
      <span id="email-availability-status"></span>
    </div>
    <button type="submit" name="submit" class=" form-control btn btn-info btn-lg hoj-blue-light login-reg-btn bold post-a-job-btn">Sign Up</button>
  </form>
</div>

Answer 1

You can implement this in 2 ways,

Check Email Availability when submitting

By checking email when form submit instead of input onBlur.

<form onSubmit='return checkemailAvailability()'>

And your JS should be like,

function checkemailAvailability() {

 // your implementiations
 // let's say the variable exist is the status

  if (exist) {
     return false;
  } else {
     return true;
  }

}

Setting a variable, And Check it while submit

your form

<form onSubmit='return checkForm()'>

your js

var emailExist = false;


    function checkemailAvailability() {

     // your implementiations
     // let's say the variable exist is the status

      if (exist) {
         emailExist = true;
      }

    }

   function checkForm() {

     return emailExist;

   }