使用jQuery AJAX提交表单时required必填属性不生效问题

问题原因 #

你当前的代码直接绑定了提交按钮的click事件，点击后立刻执行e.preventDefault()阻止了默认行为，跳过了浏览器内置的required属性校验流程，所以空字段也会直接提交表单。

修复方案 #

推荐监听表单的submit事件而非按钮的click事件：浏览器会在触发submit事件前自动执行所有内置表单校验（包括required校验、格式校验等），校验全部通过才会进入submit事件回调，此时再阻止默认跳转、发送AJAX请求即可。

修改后的JS代码： #

// 把原来的按钮click事件绑定替换成表单submit事件绑定
$('form#addNewStaffBtnForm').on('submit', function(e) {
  // 只有表单校验通过才会走到这里，阻止默认的表单提交跳转
  e.preventDefault();
  $.ajax({
    type: "POST",
    url: "datasender2.php",
    data: $(this).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");
      }
    }
  });
});

可选兼容方案：如果需要手动触发校验 #

如果一定要绑定按钮的click事件，可以主动调用表单的checkValidity()方法判断校验结果，校验通过再发送AJAX：

$("button#addNewStaffBtn").click(function(e) {
  e.preventDefault();
  const form = $('form.newStaffAdder')[0];
  // 手动触发表单校验，校验不通过直接终止后续逻辑
  if (!form.checkValidity()) {
    form.reportValidity(); // 唤起浏览器默认的校验提示
    return;
  }
  // 校验通过再发AJAX，后续逻辑和原来一致
  $.ajax({
    // 原有AJAX逻辑不变
  });
});

内容的提问来源于stack exchange，提问作者Ali Usama