如何仅在客户端验证被绕过/禁用时触发服务端验证？

嘿，我明白你的问题了——现在你的Ajax请求不管客户端验证过没过都会直接发去服务端，这完全不是你想要的逻辑。咱们只需要借助jQuery Validation自带的方法，先把客户端校验的关卡把好，再让服务端验证兜底就行。

核心思路 #

在触发Ajax请求之前，先调用jQuery Validation提供的valid()方法，确认客户端所有校验规则都已通过。只有当该方法返回true时，才继续执行服务端验证的逻辑；如果客户端校验失败，就让插件自己显示错误提示，直接阻断后续流程。

另外还要修正你代码里的一个小bug：选择器$('consult')遗漏了id选择器的#，应该写成$('#consult')，否则无法正确选中按钮元素。

修改后的完整代码 #

<form id="supportForm">
  <!-- 这里放置你的表单输入元素 -->
</form>
<button id="consult">Submit</button>
<div class="error-message"></div>

<script>
$("#supportForm").validate({
  rules: {
    first_name: "required",
    last_name: "required",
    email: { required: true, email: true },
    mobile: { required: true, digits: true, minlength: 9 },
    company: "required",
    'checkboxes[]': {required: true}
  },
  messages: {
    first_name: "First name required",
    last_name: "Last name required",
    email: "Invalid email address",
    mobile: "Please enter only digits",
    company: "Company required",
    'checkboxes[]': "Select at least one service"
  }
});

$('#consult').on('click', function(e) {
  e.preventDefault();
  const $submitBtn = $(this); // 缓存按钮元素，减少重复DOM查询
  
  // 先执行客户端验证，通过后才发起服务端请求
  if ($("#supportForm").valid()) {
    const formData = $('#supportForm').serialize();
    
    $.ajax({
      url: 'validate.php',
      type: 'POST',
      dataType: 'json',
      data: formData,
      beforeSend: function() {
        $('.error-message').empty().hide();
        $submitBtn.prop('disabled', true).val('Submitting...');
      }
    })
    .done(function (data) {
      if(!data.success) {
        $('.error-message').append(data.message).fadeIn();
        $submitBtn.prop('disabled', false).val('Submit');
      } else {
        alert('Success, process form');
      }
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
      console.log(textStatus + ': ' + errorThrown);
      console.warn(jqXHR.responseText);
      $submitBtn.prop('disabled', false).val('Submit'); // 请求失败也要恢复按钮状态
    });
  }
});
</script>

额外说明 #

• valid()方法会自动触发所有客户端校验规则，并返回布尔值表示校验结果，完美适配你的需求
• 当用户禁用JavaScript时，客户端验证会失效，此时点击按钮会直接触发Ajax请求，服务端验证就会自动兜底，完全符合你“仅在客户端验证被绕过/禁用时生效”的预期
• 我还优化了按钮状态的处理：缓存按钮元素、请求失败时恢复按钮可用状态，提升了整体用户体验

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