如何在填写多字段表单时保持提交按钮禁用状态

问题根源 #

你的代码逻辑存在错误：遍历必填字段时，只要遇到一个非空字段就直接启用提交按钮，完全忽略了其他必填字段是否为空，这就是填第一个字段按钮就变可用的原因。

修正后的代码 #

HTML部分（无需修改）

<form>
<div class="row">
  <label for="realname">Name<span class="required">*</span></label>
  <input type="text" name="realname" id="realname" required/>
  </div>

  <div class="row">
    <label for="company">Company</label>
    <input type="text" name="company" id="company"/>
  </div>

  <div class="row">
    <label for="email">Email<span class="required">*</span></label>
    <input type="email" name="email" id="email" required/>
  </div>

  <div class="row">
    <label for="phone">Phone<span class="required">*</span></label>
    <input type="tel" name="phone" id="phone" required/>
  </div>

  <div class="row">
    <input type="submit" value="SUBMIT">
  </div>
  </form>

JavaScript部分

$(document).ready(function(){
    var allInput = $('input:required');
    var submit = $('input[type="submit"]');

    // 初始化状态：按钮禁用，阻止表单提交
    submit.prop('disabled', true);
    const preventSubmit = function(e){e.preventDefault();};
    $('form').on('submit', preventSubmit);

    $(allInput).on('input change', function() {
        let allFilled = true;
        // 遍历所有必填字段，检查是否都已填写
        $.each(allInput, function(){
            if($(this).val().trim() === ""){ // 过滤纯空格输入
                allFilled = false;
                return false; // 发现空字段就终止遍历，提升效率
            }
        });
        // 根据检查结果统一设置按钮状态和表单提交行为
        submit.prop('disabled', !allFilled);
        if(allFilled){
            $('form').off('submit', preventSubmit);
        } else {
            $('form').on('submit', preventSubmit);
        }
    });
});

关键改动说明 #

1. 逻辑修正：先默认所有字段已填写，遍历过程中只要发现空字段就翻转标记，最后根据标记统一设置按钮状态，不再单个字段判断就直接修改按钮。
2. 过滤无效输入：用trim()处理字段值，避免用户输入纯空格就被判定为已填写。
3. 事件管理优化：单独定义阻止提交的函数，确保后续能准确解绑，避免重复绑定引发的问题。

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