2009-03-23 30 views
6

Me pregunto si es posible que el complemento jQuery Validator valide elementos que aún no existen en el dom cuando las reglas se configuran inicialmente.jquery validate on elements yet created

Llamar al método .Rules ("agregar", las reglas) solo asocia las reglas a los elementos que existen actualmente en el dom. Si tuviera que crear algo. La validación no se activa. ¿Alguna idea?

Página de inicio del validador que estoy utilizando: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Nuevos elementos se crean a través de http://ejohn.org/blog/javascript-micro-templating/

Básicamente hay una llamada Ajax y el servidor devuelve un montón de JSON, se alimenta esta JSON (ajaj?) a través de con el motor de plantillas de resig. Una plantilla de ejemplo se ve así:.

<script type="text/html" id="ProductsTemplateEdit"> 
    <td> 
     <input type="hidden" value="<#= item.ID #>" id="Edit.ID" name="Edit.ID" /> 
     <input type="text" value="<#= item.Price#>" id="Edit.Price" name="Edit.Price" /> 
    </td> 
</script> 

Los valores son, evidentemente, rellenan a través de la JSON que se pasa en

También debería mencionar que estoy usando el marco de validación xval, que básicamente genera automáticamente el jQuery validar reglas para mí: http://blog.codeville.net/2009/01/10/xval-a-validation-framework-for-aspnet-mvc/

+0

¿Cómo está agregando sus artículos? ¿Puedes proporcionar una muestra de código? ¿También puede vincular su plugin jQuery Validator en su pregunta? – bendewey

+0

actualización de pregunta con más información – ChadT

Respuesta

2

bien, tratar dos. ¿Qué es agregar tus elementos dinámicamente? ¿No puedes simplemente colocar las .Rules ("agregar",) al mismo código?

+0

En realidad estoy usando este método en este momento, pero esperaba que hubiera una mejor manera (usando algo similar a eventos en vivo como sugirió antes). – ChadT

+0

Creo que su método actual es más "correcto". Según lo que has descrito hasta ahora, parece que tienes bastante que pasar del lado del cliente. ¿Has comenzado a notar la caída del rendimiento? La última vez que escuché eventos en vivo puede matar el rendimiento. –

0

Usted tendrá que buscar en jQuery 1.3 de nuevo Live Events

+1

Conozco los eventos en vivo, pero no veo cómo se pueden adaptar para su uso con jquery validate – ChadT

+0

a partir de v1.3.1 live() solo admite los siguientes "Posibles valores de evento: haga clic en dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup " – bendewey

+0

Disculpe, no estoy totalmente familiarizado con las partes internas de Validator, pero ¿no debería estar planteando algún tipo de evento personalizado? Si es así, Live Events se puede usar en ese caso. –

2

Oye, no estoy seguro si esto es un hack improvisado, pero funcionó para mí. Antes de esto, estaba haciendo un each() en el selector y corriendo en el mismo problema que estás teniendo con los elementos recientemente creados, Ajaxed.

Mouseover evento en vivo parece haber hecho el truco, otorgado ur no estar loco con su css:

// >>> MSG/Comment form validator, now and forever... 
    $('form.streamForms').live('mouseover', function(){ 
     $(this).validate({ 
      rules: { 
       text: "required" 

      }, 
      messages: { 
       text: " " 
      } 
     });  
    }); 

espero que ayude!

+1

O bien, puede escuchar 'click' en lugar de' mouseover' como en: [Validar un formulario cargado con AJAX] (http://forum.jquery.com/topic/validate-validating-an-ajax-loaded-form) –

+0

Esto no se activará si alguien explora los campos, live() tampoco admite el evento de enfoque. – ChadT

0

Así es como manejé esto. Primero creé mi objeto de validación.

 

    var myvalidations = {}; 
    myvalidation.registerform = function() { $("#registerform").validate({ 
      submitHandler: function(form) { 
       $(form).ajaxSubmit(optionspersonal); 
       //submitReg(); 
      }, 
        rules: { 
       firstname: { 
        required: true, 
        minlength: 5, 
        maxlenght: 22 
       }, 
        messages: { 
          firstname: { 
           required: "Tell us what to call you by.", 
        minlength: "Your username must consist of at least 5 characters" 
          } 
        } 
      }); 
     } 

Ahora, cada vez que cree su formulario asegúrese de que tiene un ID en ella o algo para hacer referencia a ella y simplemente llamar a su función correcta después de crearlo.

 

    //create my content 
    $('.content').html('--fields etc--'); 
    //add validation 
    myvalidation.registerform(); 

Cualquier otra sugerencia bienvenida; pero creo que básicamente este es el enfoque correcto.