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
}

Answer 3

For those whose added the submit event but form is still submitting with page refresh even you added preventDefault();

Remeber if you are submitting the form through submit button and change the click event to submit like below

<button id="saveBtn" >Save</button>

$('#saveBtn').on('submit', function( e ) {
});

This is not going to work, why? Becuase you change the event from click to submit but your form will be submitted with refresh. How to fix this issue.

You need to call the form id in the submit event instead of submit button

<form id="form">
</form>

$('#form').on('submit', function( e ) {
});