asp.net mvc 4 - mvc - validación no intrusiva no funciona con contenido dinámico

mvc required field validation

Question

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);
 <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. 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 ?

Answer 1

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.

Answer 2

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.

Answer 3

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

Lo que podrías hacer cuando agregas un elemento dinámico 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 dinámico en ASP.Net MVC para un complemento utilizado para agregar elementos dinámicos a un formulario. Este complemento usa la segunda solución.

Answer 4

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 dinámico. Me tomé la libertad de crear un issue 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 está visible en la sección de validación del lado del cliente del tema de validación del modelo.

Answer 5

agregue esto a su _Layout.cshtml

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

Answer 6

prueba esto:

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