当我使用 ajax (JQUERY) 提交表单时，必需的属性不起作用

Question

我有一个表单，其中我在每个 input 字段上放置了一个 required 属性，并且我正在使用 jQuery AJAX 提交表单。

问题是如果我将一个字段留空，required 属性对我不起作用，我的表单只是提交并显示任何空输入字段消息。这是我的代码。

$("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");
      }
    }

  });

});

<div class="modal fade" id="addNewStaff">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add New Staff Member</h4>
        <button type="button" id="addNewStaffOff" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form class="newStaffAdder" id="addNewStaffBtnForm">
          <div class="form-group">
            <label for="SelectGroup">Select Group:</label>
            <div id="SelectGroupToAddStaff"></div>
          </div>
          <div class="form-group">
            <label for="stafftName">Name:</label>
            <input type="text" class="form-control" id="stafftName" name="stafftName" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" / required>
            <span id="StaffNameErrorThrower" class="text-danger"></span>
            <span id="StaffNameAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="stafftNumber">Contact Number:</label>
            <input type="text" class="form-control" id="stafftContact" name="stafftContact" autocomplete="off" onkeypress="return /[0-9]/i.test(event.key)" maxlength="11" required>
            <span id="StaffContactErrorThrower" class="text-danger"></span>
            <span id="StaffContactAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="selectCountry">Select Country:</label>
            <select class="form-control" id="staffCountry" name="staffCountry" required>
              <option value="ns">---Select---</option>
              <option value="pak">Pakistan</option>
              <option value="china">China</option>
            </select>
          </div>
          <div class="form-group">
            <div id="citySelectAfterCountry"></div>
          </div>
          <div class="form-group">
            <label for="stafftemail">Email:</label>
            <input type="email" class="form-control" id="staffEmail" name="stafftemail" required>
            <span id="StaffEmailErrorThrower" class="text-danger"></span>
            <span id="StaffEmailAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="stafftpass">Password:</label>
            <input type="password" id="staffttpass" class="form-control" id="" name="staffttpass" required>
            <span id="StaffPassErrorThrower" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label for="stafftrpass">Re-type Password</label>
            <input type="password" id="stafftrpass" class="form-control" id="" name="stafftrpass" required>
            <span id="StaffRpassErrorThrower" class="text-danger"></span>
            <span id="StaffpassMatcherThrower" class="text-primary"></span>
          </div>
          <button type="submit" id="addNewStaffBtn" class="btn btn-primary" name="addNewstafftBtn">Submit</button>
        </form>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 1

问题是因为您使用的是type="button" 按钮。这意味着表单不会被提交，只有在表单提交时才会执行表单验证。

要解决此问题，请将button 更改为type="submit" 并将JS 更改为挂钩到form 的submit 事件，而不是button 的click 事件：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="addNewStaff">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Add New Staff Member</h4>
        <button type="button" id="addNewStaffOff" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        <form class="newStaffAdder" id="addNewStaffBtnForm">
          <div class="form-group">
            <label for="SelectGroup">Select Group:</label>
            <div id="SelectGroupToAddStaff"></div>
          </div>
          <div class="form-group">
            <label for="stafftName">Name:</label>
            <input type="text" class="form-control" id="stafftName" name="stafftName" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)" / required>
            <span id="StaffNameErrorThrower" class="text-danger"></span>
            <span id="StaffNameAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="stafftNumber">Contact Number:</label>
            <input type="text" class="form-control" id="stafftContact" name="stafftContact" autocomplete="off" onkeypress="return /[0-9]/i.test(event.key)" maxlength="11" required>
            <span id="StaffContactErrorThrower" class="text-danger"></span>
            <span id="StaffContactAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="selectCountry">Select Country:</label>
            <select class="form-control" id="staffCountry" name="staffCountry" required>
              <option value="ns">---Select---</option>
              <option value="pak">Pakistan</option>
              <option value="china">China</option>
            </select>
          </div>
          <div class="form-group">
            <div id="citySelectAfterCountry"></div>
          </div>
          <div class="form-group">
            <label for="stafftemail">Email:</label>
            <input type="email" class="form-control" id="staffEmail" name="stafftemail" required>
            <span id="StaffEmailErrorThrower" class="text-danger"></span>
            <span id="StaffEmailAvailabilityThrower" class="text-success"></span>
          </div>
          <div class="form-group">
            <label for="stafftpass">Password:</label>
            <input type="password" id="staffttpass" class="form-control" id="" name="staffttpass" required>
            <span id="StaffPassErrorThrower" class="text-danger"></span>
          </div>
          <div class="form-group">
            <label for="stafftrpass">Re-type Password</label>
            <input type="password" id="stafftrpass" class="form-control" id="" name="stafftrpass" required>
            <span id="StaffRpassErrorThrower" class="text-danger"></span>
            <span id="StaffpassMatcherThrower" class="text-primary"></span>
          </div>
          <button type="submit" id="addNewStaffBtn" class="btn btn-primary" name="addNewstafftBtn">Submit</button>
        </form>
      </div>
      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="submit" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>