jquery - 更改时验证所选的选择菜单

Question

我在页面上选择了下拉菜单。我使用 jquery 验证插件来验证该字段。但是，当更改所选下拉列表时，不会触发验证。还有什么方法可以在所选下拉列表中添加错误类。 fiddle

$('.chosen').chosen()
$.validator.setDefaults({
    submitHandler: function() {
      return false
    },ignore: ":hidden:not(select)"
  });


$("#myform").validate({
        onfocusout: function (element) {
        $(element).valid();
      },     
      rules: {
        country:"required"      
      },
      messages: {        
        country:"please choose country"       
      }
    });

Answer 1

这是因为您在 onfocusout 方法中设置元素验证

onfocusout: function (element) {
    $(element).valid();
  },  

但是此事件永远不会触发，因为您用于选择的插件隐藏了选择并将其替换为 div 元素(出于 UI 目的)。因此，当您从 select 中选择一个值时，您将聚焦于 div select 而不是输入(输入永远不会获得焦点，因为所选值会通过 javascript 更新)。

您需要创建一个新的事件监听器，以便在输入更改时触发验证(请参阅 fiddle )，另一种方法是在更改事件内强制选择焦点。