Required attribute is not working when i submit the form with ajax (JQUERY)

Question

I have a form in which I put a required attribute on every input field and I am submitting the form using jQuery AJAX.

The problem is if I leave a field empty the required attribute doesn't work for me and my form just submits with showing any empty input field message. Here is my code.

$("button#addNewStaffBtn").click(function(e) {
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "datasender2.php",
    data: $('form.newStaffAdder').serialize(),
    success: function(message) {
      alert(message);
      if (jQuery.trim(message) == "ok") {
        Swal.fire(
          'Good job!',
          'New Member Has has been added Successfully!',
          'success'
        );
        document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
        $('#addNewStaffOff').click();
        $('#addNewStaffBtnForm').trigger("reset");
      } else if (jQuery.trim(message) == "nok") {
        Swal.fire(
          'Ops',
          'Something went wrong, Contact Admin!',
          'error'
        );
        document.getElementById('NewProductNameAvailabilityThrower').innerHTML = "";
        $('#addNewStaffOff').click();
        $('#addNewStaffBtnForm').trigger("reset");
      }
    }

  });

});


  
    

      
      
        Add New Staff Member
        
      

      
      
        
          
            Select Group:
            
          
          
            Name:
            
            
            
          
          
            Contact Number:
            
            
            
          
          
            Select Country:
            
          
          
            
          
          
            Email:
            
            
            
          
          
            Password:
            
            
          
          
            Re-type Password

user_519413 · Answer

The problem is because you're using a type="button" button. This means that the form will not be submit, and the form validation is only executed when the form is submit.

To fix the issue, change the button to type="submit" and change the JS to hook to the submit event of the form, not the click event of the button:

$("#addNewStaffBtnForm").on('submit', function(e) {
  e.preventDefault();
  // your AJAX request here...
});



  
    

      
      
        Add New Staff Member
        
      

      
      
        
          
            Select Group:
            
          
          
            Name:
            
            
            
          
          
            Contact Number:
            
            
            
          
          
            Select Country:
            
          
          
            
          
          
            Email:
            
            
            
          
          
            Password:
            
            
          
          
            Re-type Password

Required attribute is not working when i submit the form with ajax (JQUERY)

1 Answers