Validación de Jquery: ¿error al agregar reglas al elemento de entrada?

Question

Estoy tratando de implementar la validación de jQuery con http://docs.jquery.com/Plugins/Validation:

Mi plan de diseño:

• Mi entrada elemento:

  <form action="submit.php" id="form_id"> 
      <input type="text" class="val-req" id="my_input" name="myval" /> 
      <input type="button" onclick="validate_form('form_id', function() { $('#form_id').submit(); })" /> 
      <span id="val-msg" class="my_input"></span> 
  </form> 
  

• Luego, el listo dom:

  $(document).ready(function() { 
           $('.val-req').rules('add', {required:true}); 
          }); 
  

• método Validar:

  function validate_form(form_id, callback) { 
       var form = $('#'+form_id); 
       $('.val-req').each(function() {$(this).rules('add', {required:true});}); 
       $(form).validate({ 
         errorElement: "span", 
         errorClass: "val-error", 
         validClass: "val-valid", 
         errorPlacement: function(error, element) { 
               $('#val-msg.'+$(element).attr('id')).innerHTML(error.html()); 
             }, 
         submitHandler: callback 
       }); 
  } 
  

De acuerdo con mis expectativas, debería mostrar el mensaje de error en el lapso de marcador de posición en forma.

Pero, Problema

Error on Chrome-Console: Uncaught TypeError: Cannot read property 'settings' of undefined

También está dando error en otros navegadores. Entonces, traté de averiguar de salida del problema y encontrado:

$('.val-req').rules('add', {required:true}); # This is causing the error 

Como, por mi entendimiento y documentación -> Esto debería ser correcta.

¿Por qué esto causaría TypeError y qué puedo hacer para resolverlo?

Answer 1

Creo que su código es más complicado de lo que debe ser. Usted sólo debe tener que llamar validate el documento listo (asumiendo que su forma existe en el documento listo):

$(document).ready(function() { 
    $(".val-req").addClass("required"); 
    $("#form_id").validate({ 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

Ejemplo:http://jsfiddle.net/4vDGM/

También puedes, simplemente agregar una clase de required a elementos requeridos en lugar de agregándolos a través de JavaScript.

Otra cosa que podría hacer es añadir reglas en el objeto de reglas de opciones validate 's:

$(document).ready(function() { 
    $("#form_id").validate({ 
     rules: { 
      myval: "required" 
     }, 
     errorElement: "span", 
     errorClass: "val-error", 
     validClass: "val-valid", 
     errorPlacement: function(error, element) { 
      $('#val-msg.' + $(element).attr('id')).html(error.html()); 
     }, 
     submitHandler: function() { 
      this.submit(); 
     } 
    }); 
});​ 

Ejemplo:http://jsfiddle.net/GsXnJ/

Answer 2

Usted tiene que agregar las reglas después de llamar al plug-in de validación en el elemento de formulario:

$("form").validate() 
$(yourElement).rules("add", {...}) 

Answer 3

El culpable es el método delegate(), w que no comprueba si existe un validador:

function delegate(event) { 
    var validator = $.data(this[0].form, "validator"), 
    eventType = "on" + event.type.replace(/^validate/, ""); 
    // this fixes handling the deleted validator: 
    if (!validator) return; 
    validator.settings[eventType] && validator.settings[eventType].call(validator, this[0], event); 
} 

Estaba buscando una solución y la encontré en una publicación de blog.

Fuente: http://devio.wordpress.com/2012/07/18/fixing-jquery-validation-with-changing-validators/

Answer 4

yo estaba tratando de modificar las reglas en una forma que ya tenía la validación está configurado, pero he encontrado mi $ (document) ready (...) el código se ejecuta antes de que el principal se configuró la validación del formulario, por lo que agregar un breve setTimeout solucionó este problema para mí, por ejemplo

setTimeout(function() { 
    $(yourElement).rules("add", {...}) 
}, 100);