更改时验证选择的 select 菜单

Question

我在页面上选择了下拉菜单。我使用 jquery 验证插件来验证字段。但是当更改选择的下拉验证时，不会被触发。还有什么方法可以在所选下拉列表中添加错误 class。 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();
  },

但是此事件永远不会触发，因为您用于 select 的插件隐藏了 select 并将其替换为 div 元素（用于 UI 目的） .因此，当您 select 来自 select 的值时，您关注的是 div select 而不是输入（输入永远不会获得焦点，因为 selected值通过 javascript).

更新

您需要创建一个新的事件侦听器，在输入更改时触发验证（请参阅 fiddle）另一种方法是在更改事件中强制 select focusout。

更改时验证选择的 select 菜单

validate chosen select menu on change

validation

jquery

jquery-chosen