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

96

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 ?

Sam
fuente
También tuve el mismo problema, pero en mvc 2. Repaso paso a paso como: weblogs.asp.net/imranbaloch/archive/2010/07/11/… Esto también podría ayudarlo. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Espero que esto ayude :)
Naresh Parmar
2
Tenga en cuenta que la unobtrusive.parsefunción toma un selector como argumento, no como elemento.
Fred

Respuestas:

226

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.

Nadeem Khedr
fuente
17
Amigo, rock, ¡me salvó el día por completo! ¡Respuesta impresionante!
Dimitar Dimitrov
Tenía miedo de invitarlo yo mismo. El guión de esa página funciona de maravilla.
cezarypiatek
Código, funciona muy bien - actualización rápida (si se me permite) 1. Estoy usando knockout y obteniendo los nombres de los campos bien, parece un problema. $ .validator.unobtrusive.parseDynamicContent ('formulario'); (para obtener todos los campos), al final al enviar. 2. Esto es bueno johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… para darle una forma de nombrar los campos (que parece ser obligatorio? Estoy usando jquery bootstrap no intrusivo en la parte superior de los otros 2, así que mi las circunstancias son probablemente diferentes)
Richard Housham
Solo tenga en cuenta que cualquier configuración específica de formulario a la que haya aplicado $("form").data("validator").settingsse eliminará $(formSelector).removeData("validator")y se reemplazará con los valores predeterminados $.validator.defaultsal analizar el formulario. Esta es una excelente manera de incluir campos dinámicos, pero asegúrese de repetir cualquier código de inicialización personalizado en cada análisis nuevo.
KyleMit
19

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.

Mark Jerzykowski
fuente
hola, estoy enfrentando el mismo problema. Estoy mostrando mi vista dinámica en una ventana emergente (diálogo de jquery). las validaciones discretas no funcionan. ¿Dónde llamo $ (formulario) .valid () en mi vista dinámica o en algún otro lugar?
mmssaann
Siempre estaba evitando que el formulario se enviara devolviendo falso dentro de $ (formulario) .submit porque estaba haciendo un envío AJAX, pero luego necesitaba una forma de no llamar al envío AJAX cuando fallaba la validación. $ (formulario) .valid () es la respuesta! ¡Gracias!
jgerman
6

agregue esto a su _Layout.cshtml

 $(function () {
        //parsing the unobtrusive attributes when we get content via ajax
        $(document).ajaxComplete(function () {
            $.validator.unobtrusive.parse(document);
        });
    });
AHmed Ibrahim
fuente
3
Esto es particularmente ineficaz.
Liam
5

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.

Rabadash8820
fuente
3

prueba esto:

if ($.validator.unobtrusive != undefined) {
    $.validator.unobtrusive.parse("form");
}
Omid-RH
fuente
2

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.

Arrendajo
fuente
1
Este me ha funcionado. Estaba encontrando una solución de los últimos días, funciona en asp.net core 2. Gracias.
Pradip Rupareliya
0

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>

;)

mohammad miraali
fuente