jQuery Validate表单验证用户名错误提示不显示问题排查

用户名校验提示不显示是三个代码错误导致的：

• 字段名不匹配：jQuery Validate 完全通过表单元素的name属性绑定校验规则，你配置里写的校验字段是username，但实际用户名输入框的name属性值是firstname，规则根本没绑定到对应的输入框上。
• 重复加载脚本：页面里先后引入了2个不同版本的jQuery、2份不同路径的jQuery Validate插件，后加载的低版本jQuery会覆盖之前的实例，很容易造成插件运行异常。
• 规则配置不全：你给用户名配置了minlength:6的规则，但没写对应的提示文案，就算字段名匹配，触发长度校验时也不会显示你自定义的提示。

1. 清理重复的脚本引入 #

脚本引入必须遵循「先jQuery，后依赖jQuery的插件」的顺序，删除重复引入的标签，只保留一份即可：

<!-- 保留单版本jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 保留单份jQuery Validate插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<!-- 其他依赖脚本放在后面引入 -->
<script src="js/bootstrap.min.js"></script>

2. 统一校验规则和表单字段的name值 #

两种改法选一种就行：

• 改法1：把用户名输入框的name属性改成和规则一致的username：

<label for="username">用户名</label>
<input type="text" name="username" id="username" placeholder="请输入用户名">

• 改法2：把校验配置里的字段名改成和现有input一致的firstname，同时补全中文提示文案：

$(document).ready(function() {
  $("#form1").validate({
    rules: {
      firstname: {
        required: true,
        minlength: 6
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    messages: {
      firstname: {
        required: "用户名不能为空",
        minlength: "用户名长度不能少于6位"
      },
      password: {
        required: "密码不能为空",
        minlength: "密码长度不能少于5位"
      }
    },
    // 指定错误提示插入位置，避免布局错位
    errorPlacement: function(error, element) {
      error.insertAfter(element);
    }
  });
});

3. 修复CSS语法错误 #

现有CSS有几处书写错误会导致样式异常，一并修正：

• .login-form label 样式里的text-align: right margin:45px;缺少分号，改为text-align: right; margin:45px;
• p标签样式里的font-style: arial;写法错误，arial是字体族不属于font-style属性，font-align是不存在的CSS属性，正确写法为text-align: left;
• .login-form button里重复定义了两次padding属性，无效的padding:79px;可以直接删除。

你已经写了.error { color: red; }的错误提示样式，改完上述问题后，两个输入框的校验提示都会正常渲染在对应输入框下方。

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