jQuery Validation插件表单验证异常问题排查求助

核心原因：表单元素缺失name属性 #

jQuery Validate插件完全依赖表单元素的name属性匹配验证规则，你的所有输入框仅设置了id，未添加对应的name，导致规则无法绑定到元素，验证逻辑根本没触发，表单直接默认提交刷新页面。

具体修复步骤 #

1. 给所有需要验证的input添加name属性，确保name值与rules配置里的键完全一致：

   • 姓名输入框：<input type="text" class="form-control" id="nomeFisica" name="nomeFisica" aria-describedby="emailHelp" placeholder="Insira seu nome" />
   • CPF输入框：你的rules里是cpfFisica，但原input的id是cpf，需把id改为cpfFisica，同时添加name="cpfFisica"：<input type="number" class="form-control" id="cpfFisica" name="cpfFisica" placeholder="Insira seu CPF" />
   • 其余如dddFisica、telFisica等所有在rules中配置的字段，都要添加对应name属性。

2. 移除input上的原生required属性：
   你给nomeFisica加了原生required，所以只有这个字段有反应，但这是浏览器原生验证，不是插件的功能。如果要完全用jQuery Validate处理验证，建议去掉原生required。

3. 核对规则与元素的匹配一致性：
   确保rules里的每个键，都对应一个input的name属性值，避免出现像原CPF字段那样，规则键是cpfFisica但元素id是cpf的不匹配情况。

修复后的示例代码片段 #

HTML（修正后的姓名与CPF输入框） #

<div class="form-group pt-2 pb-2">
  <label for="exampleInputEmail1">Nome completo</label>
  <input type="text" class="form-control" id="nomeFisica" name="nomeFisica" aria-describedby="emailHelp" placeholder="Insira seu nome" />
</div>
<div class="form-group pt-2 pb-2">
  <label for="exampleInputPassword1">CPF</label>
  <input type="number" class="form-control" id="cpfFisica" name="cpfFisica" placeholder="Insira seu CPF" />
</div>

JS（无需修改，只要name匹配即可） #

$().ready(function() {
  $("#formFisica").validate({
    onkeyup: false,
    onfocusout: false,
    rules: {
      nomeFisica: {
        required: true,
      },
      cpfFisica: {
        required: true,
        number: true,
        maxlength: 11
      },
      // 其余规则保持不变
    },
    messages: {
      // 提示信息保持不变
    }
  });
})

额外提示 #

• 两个表单（formFisica和formJuridica）都需要按同样逻辑修复，确保每个需验证的input都有name属性，且与对应表单的rules键匹配。
• 插件的equalTo规则用id是可行的，因为它通过选择器匹配目标元素，不需要依赖name属性。

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