如何通过jQuery Validator验证下拉选择框？

问题根源 #

你的下拉框默认选中的Choose...选项没有设置value属性，jQuery Validator的required规则会将该选项的文本内容识别为有效值，导致验证不触发。

1. 修正HTML结构 #

给默认选项添加value=""，让验证器识别这是未选择的状态，同时移除冗余的validate[required]类（用代码配置规则更规范）：

<label class="form-label" for="inputState">Status</label>
<select id="inputState" name="status" class="form-control">
  <option selected value="">Choose...</option>
  <option value="1">Active</option>
  <option value="0">Deactive</option>
</select>

2. 完善jQuery验证配置 #

添加自定义错误提示，确保验证逻辑生效：

$("#category_validation_form").validate({
  rules: {
    status: {
      required: true
    }
  },
  messages: {
    status: {
      required: "请选择状态"
    }
  },
  errorPlacement: function(error, element) {
    // 自定义错误提示位置，放在下拉框下方
    error.insertAfter(element);
  }
});

3. 必查注意事项 #

• 页面需按顺序引入jQuery和jQuery Validator脚本
• 表单的id必须与验证代码中的选择器#category_validation_form完全一致
• 避免同时使用多套表单验证插件（如validationEngine），防止冲突

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