mvc - Agregar reglas de validación jQuery a elementos creados dinámicamente en ASP

unobtrusive validation mvc 5

Question

Tengo algunos campos de formulario insertados dinámicamente en una página en un proyecto MVC3. Normalmente, agregaríamos el servidor de validación de jQuery, pero en este caso no podemos (varios campos en la interfaz de usuario generan el valor de un campo oculto, y esto es lo que se envía. No podemos validar contra un campo oculto, por lo tanto, en lugar de eso, debemos agregar la validación de solo UI para los campos que el usuario puede ver

Una vez que los campos se agregan dinámicamente a la página, ejecuto el siguiente código en el contenedor:

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

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

Estoy en una pérdida. ¿Algunas ideas?

Estoy usando jQuery Validation 1.9.0 y el complemento discreto

Answer 1

Ahora que entiendo lo que está sucediendo con el lado del complemento no intrusivo (que entiendo que está relacionado con ASP.NET de alguna manera), esto es lo que debe hacer:

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

Así que terminas 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/

Answer 2

Como resultado, esto se puede hacer principalmente en HTML agregando algunos atributos a cada elemento del formulario:

• Un atributo de name
• data-val="true"
• data-val-required="message"

Al igual que:

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

Entonces el formulario solo 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");

Answer 3

Creo que tuviste un error más simple, como tu find(''.date'') realidad no fue encontrar nada. Porque de lo contrario, su código me parece bastante razonable. Este es un ejemplo de cómo funciona como esperaba: http://jsfiddle.net/ryleyb/LNjtd/

Pude 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''
}
}
);​