Required fields are not working with ajax

Question

I have created a Registration Form and set its input field to require attribute but its not working with ajax

<div class="form-group">
    <input required  type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="text" id="reg_username" placeholder="Enter your User Name    " value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
</div>
<div class="form-group">
    <input required  type="password" id="password" placeholder="Password" value="" class="form-control login-field">
    <i class="fa fa-lock login-field-icon"></i>
</div>
<a id="register" class="btn btn-success modal-login-btn">Sign up</button>

and here is ajax code

<script type="text/javascript">
$(document).ready(function(){
  $("#register").click(function(e){         
   if($("form").valid()){
      e.preventDefault();
   }
  var firstname=$('#First_name').val();
  var lastname=$('#last_name').val();
  var username=$('#reg_username').val();
  var password=$('#password').val();
  var email=$('#email').val();
  $.ajax({
    type: "POST",
    url: "doRegister.php",
    data: 
         "first_name=" +firstname+ "&last_name=" +lastname+ "&username="+ username+ "&password="+ password+ "&email="+ email ,
    success: function(html){
      document.write(html);
    }
  });
  return false;
});
});
</script>

i just want to run required field validation with ajax i could not find any solution .

Answer 1

You need to use submit event instead of click in order to work the html5 validation. Submit event only fire after successfully validated.

$(document).ready(function() {
  $("#register").submit(function(e) {
    //---------------^---------------
    e.preventDefault();
    var firstname = $('#First_name').val(),
      lastname = $('#last_name').val(),
      username = $('#reg_username').val(),
      password = $('#password').val(),
      email = $('#email').val();
    $.ajax({
      type: "POST",
      url: "doRegister.php",
      data: "first_name=" + firstname + "&last_name=" + lastname + "&username=" + username + "&password=" + password + "&email=" + email,
      success: function(html) {
        console.log(html);
      }
    });
    return false;

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" id="register" role="form">
  <!---                       ---^----             ------>
  <div class="form-group">
    <input required type="text" id="First_name" placeholder="Enter your First Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
  </div>
  <div class="form-group">
    <input required type="text" id="last_name" placeholder="Enter your Last Name" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
  </div>
  <div class="form-group">
    <input required type="text" id="reg_username" placeholder="Enter your User Name    " value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
  </div>
  <div class="form-group">
    <input required type="email" id="email" placeholder="Enter your Email" value="" class="form-control login-field">
    <i class="fa fa-user login-field-icon"></i>
  </div>
  <div class="form-group">
    <input required type="password" id="password" placeholder="Password" value="" class="form-control login-field">
    <i class="fa fa-lock login-field-icon"></i>
  </div>
  <button type="submit" class="btn btn-success modal-login-btn">Sign up</button>
</form>

Answer 2

If your form is invalid, you need to return out the function - e.preventDefault() is not enough to stop your ajax being executed

if($("form").valid()){
  e.preventDefault();
  return; // <-- here
}