onkeyup y onfocusout no funcionan en jQuery Validate

coffeescript jquery-validate

Question

Estoy usando el complemento jQuery Validate para el propósito de validación. Tengo que validar en tiempo real el formulario. Por ejemplo, si se requiere un nombre , el usuario debe recibir el mensaje requerido por primera vez y cuando comienza a escribir en el cuadro de texto.

Para lograr esta funcionalidad, estoy usando las opciones onkeyup y onfocusout del complemento. Para esto me refiero a este enlace que tiene el mismo problema.

Aquí está mi código coffeescript para la validación de formularios

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

Pero no funciona bien. Por ejemplo, para fines de prueba, agregué un mensaje de alerta en onkeyup pero no aparece nada y tampoco aplica la validación en tiempo real.

¿Hay algo que me falta? Aquí está mi 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;">

Entonces, ¿cómo puedo resolver este problema?

Answer 1

Nunca .valid() método .valid() dentro del método .validate() . Consulte el código fuente de onkeyup y onfocusout para ver cómo se hace.

Use this.element(element) lugar de $(element).valid()

Para onfocusout la funcionalidad predeterminada ("validación diferida") de onkeyup y onfocusout y utilizar la validación "ansiosa" en su lugar ...

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

DEMO: http://jsfiddle.net/ajy5j8jq/