javascript - Rails 5 - jQuery 验证 form.select 仅在提交后有效

Question

我有一个需要验证的下拉菜单，但它的行为并不像我期望的那样。

# app/views/forms/_form.html.erb

<%= form.select :environment, [ 'Production', 'Staging', 'Test' ],
{ prompt: 'Select an Environment' }, { required: true } %>


# app/assets/javascripts/forms.js
$('form#new_form').validate({
  validClass: "valid",
  errorClass: "invalid",
    rules: {
      'form[environment]': { required: true },
    }
});

重现步骤:

1. 点击下拉菜单
2. 选择一个选项；生产、暂存或测试
3. valid 类被添加到下拉列表中
4. -- 这就是问题所在 -- 单击下拉列表中的返回，然后选择提示选择环境。
5. 无效 类不会添加到下拉列表中。

上述步骤仅在我提交表单并观察到错误时才按预期工作。然后，当我重复步骤 1-5 时，当我选择一个选项(生产、暂存或测试)时添加 valid 类，当我选择一个选项(生产、暂存或测试)时添加 invalid 类我选择提示 Select an Environment

Answer 1

根据文档 ( https://jqueryvalidation.org/documentation/ )，它的行为符合预期。

Before a field is marked as invalid, the validation is lazy: Before submitting the form for the first time, the user can tab through fields without getting annoying messages – they won't get bugged before having the chance to actually enter a correct value

Once a field is marked invalid, it is eagerly validated: As soon as the user has entered the necessary value, the error message is removed