validación discreta que no funciona con contenido dinámico

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.

He pasado días intentando que este código funcione sin suerte.

Aquí está la vista:

@model MvcApplication2.Models.test

@using (Html.BeginForm())
{
 @Html.ValidationSummary(true);
 <div id="res"></div>
 <input id="submit" type="submit" value="submit" />
}

La vista parcial:

@model MvcApplication2.Models.test

@Html.TextAreaFor(m => m.MyProperty);
@Html.ValidationMessageFor(m => m.MyProperty);

<script type="text/javascript" >
  $.validator.unobtrusive.parse(document);
</script>

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. Incluso si no completo ninguna información en el cuadro de texto, el evento de envío 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.

Probablemente esto se deba a que si cargo el contenido de forma dinámica, los controles aún no existen en el DOM. Pero hago una llamada a la $.validator.unobtrusive.parse($("#res")); que debería ser suficiente para informar al validador sobre los controles recién cargados ...

Alguien puede ayudar ?

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

Lo que puede hacer cuando agrega un elemento dinámico al formulario es

1. Puede eliminar la validación del formulario y volver a validarlo así:

   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. Accede al formulario unobtrusiveValidation datos formulario usando el datamétodo jquery :

   $(form).data('unobtrusiveValidation')

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

También puede consultar este artículo sobre cómo aplicar una validación de jquery discreta a contenido dinámico en ASP.Net MVC para ver un complemento que se usa para agregar elementos dinámicos a un formulario. Este complemento utiliza la segunda solución.

Como complemento 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 adicionales mencionados) y luego enviará ese formulario usando ajax, recuerde 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);
        });
    });

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

prueba esto:

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

Me golpearon 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 está intentando guardar el formulario.

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

Espero que esto ayude a alguien.

simplemente copie este código nuevamente al final del código modal

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)