onkeyup和onfocusout在jQuery Validate中不起作用

Question

我正在使用jQuery Validate插件进行验证.我必须在表单上进行实时验证.例如,如果需要名字,那么用户应该首次获得所需的消息,并在他开始输入文本框时进入.

为了实现这个功能,我正在使用插件onkeyup和onfocusout选项.为此,我引用了具有相同问题的链接.

这是我用于表单验证的coffeescript代码

defaultPageForm: (self)->
      form = $("#PageForm")
      if form.length > 0
        form.find('textarea').on 'click', -> $(@).valid()
        form.find('input').on    'click', -> $(@).valid()
        form.validate    

          ignore: ".ignore"                        
          rules:
            "view[name]":
              required: true
              NameWordCount: [3]


            "view[comment]":
              required: true
              CommentWordCount: [5]

            accept_terms: "required"

          messages:
            "view[comment]": "Please add comment"

          errorElement: "span"
          errorClass: "error_msg wide "
          errorPlacement: (error, element) ->
            element.siblings(".view_form_error_msg").remove()
            error.appendTo element.closest(".controls")              
            return

          ###### Real time validation code #############
          onkeyup: (element) -> 
            $(element).valid()  
            return        

          onfocusout: (element) -> 
            $(element).valid()  
            return 

          submitHandler: (form) ->
            self._setupData()
            self._submitForm(form)
            off

      return

但它没有正常工作.例如,出于测试目的,我添加了警报消息,onkeyup但没有弹出任何内容,也没有应用实时验证.

有什么我想念的吗？这是我的HTML

<input type="text" value="as as" size="50" placeholder="Full Name" name="view[name]" id="customerName" class="string required wide" style="font-size: 20.4572px; line-height: 49px;">

那么我该如何解决这个问题呢.

Answer 1

您永远不会在.valid()方法中使用该.validate()方法.请参阅源代码onkeyup并onfocusout了解它是如何完成的.

用this.element(element)而不是$(element).valid()

为忽略的默认功能("懒验证") onkeyup,并onfocusout和使用"渴望"确认,而不是...

$('#myform').validate({
    onkeyup: function(element) {
        this.element(element);  // <- "eager validation"
    },
    onfocusout: function(element) {
        this.element(element);  // <- "eager validation"
    }
    ....

演示:http: //jsfiddle.net/ajy5j8jq/