validación no intrusiva no funciona con contenido dynamic

Tengo problemas para intentar que la validación de jquery discreta funcione con una vista parcial que se carga dinámicamente a través de una llamada AJAX.

Estuve pasando días intentando que este código funcione sin suerte.

Aquí está la vista:

@model MvcApplication2.Models.test @using (Html.BeginForm()) { @Html.ValidationSummary(true); 
}

La vista parcial:

 @model MvcApplication2.Models.test @Html.TextAreaFor(m => m.MyProperty); @Html.ValidationMessageFor(m => m.MyProperty);  $.validator.unobtrusive.parse(document);  

El modelo:

  public class test { [Required(ErrorMessage= "required field")] public int MyProperty { get; set; } } 

El controlador:

  public ActionResult GetView() { return PartialView("Test"); } 

y finalmente, el javascript:

 $(doument).ready(function () { $.ajax({ url: '/test/getview', success: function (res) { $("#res").html(res); $.validator.unobtrusive.parse($("#res")); } }); $("#submit").click(function () { if ($("form").valid()) { alert('valid'); return true; } else { alert('not valid'); return false; } }); 

La validación no funciona. Aunque no complete ninguna información en el texbox, el evento submit muestra la alerta (‘válida’).

Sin embargo, si en lugar de cargar dinámicamente la vista, uso @Html.Partial("test", Model) para representar la Vista parcial en la Vista principal (y no hago la llamada AJAX), entonces la validación funciona bien .

Esto es probablemente porque si cargo el contenido dinámicamente, los controles aún no existen en DOM. Pero hago una llamada a $.validator.unobtrusive.parse($("#res")); que debería ser suficiente para que el validador sobre los controles recién cargados …

Alguien puede ayudar ?

Si intenta analizar un formulario que ya está analizado, no se actualizará

Lo que podrías hacer cuando agregas un elemento dynamic al formulario es

  1. Puede eliminar la validación del formulario y validarlo de esta manera:

     var form = $(formSelector) .removeData("validator") /* added by the raw jquery.validate plugin */ .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin*/ $.validator.unobtrusive.parse(form); 
  2. Acceda a los datos de validación unobtrusiveValidation formulario utilizando el método de data jquery:

     $(form).data('unobtrusiveValidation') 

    luego acceda a la colección de reglas y agregue los nuevos atributos de elementos (algo complicado).

También puede consultar este artículo sobre la Aplicación de validación de jquery discreta al contenido dynamic en ASP.Net MVC para un complemento utilizado para agregar elementos dynamics a un formulario. Este complemento usa la segunda solución.

Como una adición a la respuesta de Nadeem Khedr …

Si ha cargado un formulario en su DOM dinámicamente y luego llama

 jQuery.validator.unobtrusive.parse(form); 

(con los bits extra mencionados) y luego van a enviar esa forma usando ajax recuerda llamar

 $(form).valid() 

que devuelve verdadero o falso (y ejecuta la validación real) antes de enviar su formulario.

agregue esto a su _Layout.cshtml

  $(function () { //parsing the unobtrusive attributes when we get content via ajax $(document).ajaxComplete(function () { $.validator.unobtrusive.parse(document); }); }); 

prueba esto:

 if ($.validator.unobtrusive != undefined) { $.validator.unobtrusive.parse("form"); } 

Sorprendentemente, cuando miré esta pregunta, los documentos oficiales de ASP.NET todavía no tenían información sobre el método parse() discreto o cómo usarlo con contenido dynamic. Me tomé la libertad de crear un problema en el repository de documentos (haciendo referencia a la respuesta original de @ Nadeem) y enviar una solicitud de extracción para solucionarlo. Esta información ahora está visible en la sección de validación del lado del cliente del tema de validación del modelo.

Me golpeó en el mismo problema y nada funcionó excepto esto:

 $(document).ready(function () { rebindvalidators(); }); function rebindvalidators() { var $form = $("#id-of-form"); $form.unbind(); $form.data("validator", null); $.validator.unobtrusive.parse($form); $form.validate($form.data("unobtrusiveValidation").options); } 

y añadir

 // Check if the form is valid var $form = $(this.form); if (!$form.valid()) return; 

donde intentas guardar el formulario.

Estaba guardando el formulario a través de la llamada Ajax.

Espero que esto ayude a alguien.