满足输入匹配条件时JavaScript无法提交表单的问题

问题根源 #

1. 验证逻辑不完整：你的代码只对比了前三个输入框的内容，漏掉了第四个输入框（InitialsP4）与第三个的校验，无法确保四个输入框内容完全一致。
2. 提交循环触发：在jQuery绑定的submit事件中调用document.getElementById("bca").submit()，会再次触发该submit事件，导致代码又执行e.preventDefault()拦截提交，陷入循环无法真正提交表单。

修正后的代码 #

JavaScript部分

$(document).ready(function() {
  $('#bca').submit(function(e) {
    // 获取所有输入框的值并去除首尾空格
    const vals = [
      $('#InitialsP1').val().trim(),
      $('#InitialsP2').val().trim(),
      $('#InitialsP3').val().trim(),
      $('#InitialsP4').val().trim()
    ];
    
    // 检查所有值是否与第一个值一致
    const allMatch = vals.every(val => val === vals[0]);
    
    if (!allMatch) {
      alert('所有输入框内容必须一致，请修正');
      e.preventDefault(); // 验证不通过时阻止表单提交
    }
    // 验证通过时，不做额外操作，让表单执行默认提交行为
  });
});

HTML部分（修正中文引号问题）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="invoice-box">
  <form id="bca" action="bca" method="post">
    <input id="InitialsP1" name="InitialsP1" type="text"
          placeholder="Initials" size="5" value="" required 
          style="float: right">
    <input id="InitialsP2" name="InitialsP2" type="text"
          placeholder="Initials" size="5" value="" required 
          style="float: right">
    <input id="InitialsP3" name="InitialsP3" type="text"
          placeholder="Initials" size="5" value="" required 
          style="float: right">
    <input id="InitialsP4" name="InitialsP4" type="text"
          placeholder="Initials" size="5" value="" required 
          style="float: right">
    <div class="form-group">
      <div class="col-md-12 text-center">
        <button id="submit" type="submit" class="btn btn-primary btn-lg">Submit</button>
      </div>
    </div>
  </form>
</div>

关键改进点 #

• 用数组+every方法统一校验所有输入框，逻辑更简洁且易于扩展（后续增加输入框只需修改数组）。
• 仅在验证不通过时调用e.preventDefault()，验证通过时让表单执行默认提交流程，避免循环触发问题。
• 去除了无用的var form = bca;代码，修正了HTML中style属性的中文引号问题。

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