如何用jQuery实现表单切换前的required字段验证？

要在点击按钮切换表单前验证必填字段，直接用HTML5原生的表单验证API就行，不用额外插件。

具体实现 #

修改你的jQuery点击事件处理函数，先检查表单是否符合验证规则，通过后再切换表单：

$(function () {
  $('#reservation-submit-btn').click(function () {
    const reservationForm = document.getElementById('reservation-form');
    // 检查所有必填字段是否填写正确
    if (reservationForm.checkValidity()) {
      // 验证通过，切换表单显示状态
      $('#reservation-info-form').hide('slow');
      $('#customer-info-form').show('slow');
    } else {
      // 验证不通过，弹出浏览器原生的验证提示
      reservationForm.reportValidity();
    }
  })
})

关键API说明 #

• checkValidity()：返回布尔值，true代表所有字段满足required、min/max等验证规则，false则说明有字段未达标。
• reportValidity()：如果验证失败，会触发浏览器自带的提示框，告诉用户哪个字段没填对，效果和点击type="submit"按钮时的默认提示完全一致。

额外说明 #

你把按钮设为type="button"是对的，这样不会触发表单默认提交行为。通过手动调用验证API，既能保留表单切换的逻辑，又不会跳过必填字段的验证。

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