2012-02-21 31 views
25

Tengo algunos campos de formulario insertados dinámicamente en una página en un proyecto de MVC3. Normalmente, deberíamos agregar la validación jQuery del lado del servidor, pero en este caso no podemos (varios campos en la IU generan el valor para un campo oculto, y esto es lo que se envía. No podemos validar contra un campo oculto, por lo que debemos lugar añadir validación UI-sólo para los campos que el usuario puede ver)Agregar reglas de validador de jQuery a elementos creados dinámicamente en ASP

Una vez que los campos se añaden dinámicamente a la página, corro el siguiente código sobre el recipiente:

$container.find(".date").rules("add", { 
    required: true, 
    messages: { 
     required: "The date is required" 
    } 
}); 

Pero doesn no funciona! Por extraño que parezca, deshabilitar el código anterior, crear los elementos dinámicos, luego ejecutar el código en el navegador La consola JS funciona, pero solo se muestra el mensaje de validación predeterminado.

Estoy perdido. ¿Algunas ideas?

estoy usando jQuery 1.9.0 Validación & el plugin discreta

Respuesta

6

Ahora que entiendo lo que está pasando con el lado complemento discreto de las cosas (que Entiendo que está relacionado con ASP.NET de alguna manera), esto es lo que necesita hacer:

Después de agregar su nuevo elemento, llame al $.validator.unobtrusive.parseElement(newElement) y se agregará al formulario. Como sugirió su respuesta, debe establecer los atributos data-val y data-val-required en el nuevo elemento de formulario.

por lo que acabar con esto:

//create new form element 
$('form fieldset').append('<br>New Field: '+ 
    '<input type="text" data-val="true" data-val-required="A date is required." name="newField">'+ 
    ' * Also required'); 

//add new rules to it 
$.validator.unobtrusive 
    .parseElement($('form').find('input[name="newField"]').get(0)); 

se muestra aquí: http://jsfiddle.net/ryleyb/LNjtd/2/

+0

¡Ah, bien! Podría hacer un método personalizado para hacer esto y agregar los atributos de datos en el campo seleccionado, todo a la vez. –

+4

Incluso en JSFiddle no funciona. – Gabriel

51

Como resultado, esto se puede hacer sobre todo en HTML mediante la adición de unos pocos atributos a cada elemento de la forma:

  • Un name atribuir
  • data-val="true"
  • data-val-required="message"

así:

<input type='text' name="date" data-val="true" data-val-required="A date is required." /> 

Entonces la forma sólo necesita ser re-analizado a través de JS:

//Remove current form validation information 
$("form") 
    .removeData("validator") 
    .removeData("unobtrusiveValidation"); 

//Parse the form again 
$.validator 
    .unobtrusive 
    .parse("form"); 
+1

5,5 años más tarde, todavía funciona como un campeón al inyectar nuevas vistas parciales en una interfaz del editor. – Tommy

1

Creo que será algo más sencillo equivocada - al igual que su find('.date') no era en realidad encontrar cualquier cosa. Porque de lo contrario, tu código parece bastante razonable para mí. Aquí es un ejemplo de que funcione como se esperaba: http://jsfiddle.net/ryleyb/LNjtd/

yo era capaz de validar el código correctamente con esto:

$('form fieldset') 
    .append('<br>New Field: <input type="text" name="newField"> * Also required') 
    .find('input[name="newField"]').rules('add', { 
     required: true, 
     messages: { 
     required: 'New field is required' 
     } 
    } 
);​ 
+0

Es cierto, pero no agregó una referencia al complemento Validación no intrusiva: parece ser el lugar donde está el problema. Lo actualicé para incluir esto: http: // jsfiddle.net/LNjtd/1/ –

+0

Huh, no solo eso, te envié el enlace al jsfiddle incorrecto :) – Ryley

+0

Pero también, no entendí que el complemento discreto estaba relacionado, y no sé nada sobre cómo ASP.NET genera sus formas y luego las usa ... así que sí, estás solo, y parece que encontraste una solución viable. – Ryley

Cuestiones relacionadas