使用jQuery提交Bootstrap表单时提交按钮无法正常工作求助

存在的问题 #

• jQuery代码语法错误：末尾多了一个多余的});闭合符，会直接导致代码执行报错
• 方法调用不匹配：你用到的valid()是jQuery Validation第三方插件提供的方法，如果你没有引入该插件，该方法不存在会直接报错。你明确说明使用浏览器默认校验规则，应该用原生的checkValidity()方法
• 事件绑定逻辑错误：你绑定的是提交按钮的click事件，一是用户通过回车触发表单提交时逻辑不会触发，二是submit类型的按钮会默认触发表单提交，页面直接刷新，你的自定义逻辑来不及执行
• HTML结构错误：表单代码末尾多了一个多余的</div>闭合标签，可能导致页面渲染异常

修复后的代码 #

jQuery代码（使用浏览器原生校验，不需要额外插件）

// 等待DOM加载完成再执行
$(function() {
  var form = $("#contactForm");
  // 监听表单的submit事件，而不是按钮的click事件
  form.on("submit", function(e) {
    // 阻止浏览器默认提交行为
    e.preventDefault();
    // 调用原生校验方法
    if(this.checkValidity()) {
      alert("Form Submitted Successfully");
      // 此处可添加后续提交逻辑，比如AJAX提交表单
    }
  })
})

修正后的表单代码（删除多余闭合div）

<form class="row contact-form shadow-lg p-3 mb-5 bg-white rounded" style="width:auto; margin-left: 0.4%;" name="form" id="contactForm">
  <div class="row">
    <div class="form-group col-lg-6 col-sm-12 mb-sm-3">
      <label for="name" class="form-label"></label>
      <input type="text" class="form-control" id="name" placeholder="Enter Your Name" required />
    </div>
    <div class="form-group col-lg-6 col-sm-12">
      <label for="email" class="form-label"></label>
      <input type="email" class="form-control" id="email" placeholder="Enter You Email" required />
    </div>
    <br />
    <br />
    <div class="form-group col-12">
      <label for="subject" class="form-label"></label>
      <input type="text" class="form-control" id="subject" placeholder="Subject Of your Inquiry" required />
    </div>
    <br />
    <div class="form-group col-12">
      <label for="message" class="form-label"></label>
      <textarea class="form-control" id="message" rows="6" placeholder="Message" required></textarea>
    </div>
    <br />
    <br />
  </div>
  <div class="col-lg-3 d-flex justify-content-center">
    <button type="submit" id="submit-btn" class="btn btn-primary">Send Message</button>
  </div>
</form>

补充说明 #

如果你确实需要使用valid()方法，可自行引入jQuery Validation插件的JS文件，完成表单校验规则初始化后即可正常调用该方法。

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