为何点击提交按钮需两次才生效？表单验证逻辑问题求助

你这个问题的核心在于点击事件的绑定时机错误：

• 你把#submit的click事件绑定逻辑放在了invalid事件的处理函数内部，只有当浏览器触发invalid事件（也就是第一次提交表单、检测到必填项为空时），才会给按钮绑定点击事件。
• 第一次点击提交时，click事件还没被绑定，自然不会执行弹窗逻辑；等invalid事件触发后，click事件才完成绑定，第二次点击时才会触发弹窗。

把click事件的绑定逻辑从invalid事件处理函数中分离出来，直接在页面加载完成后绑定，同时保留invalid事件阻止默认提示的逻辑即可：

// 阻止浏览器默认的invalid提示框
document.addEventListener('invalid', function(e) {
  e.preventDefault();
}, true);

// 页面加载完成后就绑定submit按钮的点击事件
$(function() {
  $('#submit').on("click", function() {
    let valid = true;
    $('[required]').each(function() {
      if ($(this).is(':invalid') || !$(this).val()) valid = false;
    });
    if (!valid) {
      swal({
        title: "Good job",
        text: "You clicked the button!",
        type: "success"
      });
    }
  });
});

• invalid事件只负责阻止浏览器自带的必填项提示，不需要在这里处理提交逻辑
• 点击事件绑定在页面初始化阶段（$(function(){})就是jQuery的DOM加载完成事件），确保按钮一开始就有点击事件监听，第一次点击就能执行校验和弹窗逻辑

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