convalida discreta che non funziona con contenuti dinamici

Ho problemi nel tentativo di far funzionare la convalida jquery discreta con una vista parziale caricata dinamicamente tramite una chiamata AJAX.

Ho passato giorni a cercare di far funzionare questo codice senza fortuna.

Ecco 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 parziale:

@model MvcApplication2.Models.test

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

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

Il modello:

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

Il controller:

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

e infine, il 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 convalida non funziona. Anche se non inserisco nessuna informazione nel texbox, l'evento submit mostra l'avviso ('valid').

Tuttavia, se invece di caricare dinamicamente la vista, utilizzo @Html.Partial("test", Model)per eseguire il rendering della vista parziale nella vista principale (e non eseguo la chiamata AJAX), la convalida funziona perfettamente.

Ciò è probabilmente dovuto al fatto che se carico dinamicamente il contenuto, i controlli non esistono ancora nel DOM. Ma faccio una chiamata a $.validator.unobtrusive.parse($("#res")); cui dovrebbe essere sufficiente per far conoscere al validatore i controlli appena caricati ...

Qualcuno può aiutare?

Se provi ad analizzare un modulo che è già stato analizzato, non verrà aggiornato

Quello che potresti fare quando aggiungi un elemento dinamico al modulo è l'uno o l'altro

1. Puoi rimuovere la convalida del modulo e convalidarlo nuovamente in questo modo:

   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. Accedi ai unobtrusiveValidationdati del modulo utilizzando il datametodo jquery :

   $(form).data('unobtrusiveValidation')

   quindi accedi alla raccolta di regole e aggiungi i nuovi attributi degli elementi (che è un po 'complicato).

Puoi anche consultare questo articolo sull'applicazione della convalida jquery discreta a contenuto dinamico in ASP.Net MVC per un plug-in utilizzato per aggiungere elementi dinamici a un modulo. Questo plugin utilizza la seconda soluzione.

In aggiunta alla risposta di Nadeem Khedr ...

Se hai caricato dinamicamente un modulo nel tuo DOM e poi chiama

jQuery.validator.unobtrusive.parse(form); 

(con i bit extra menzionati) e quindi invierà quel modulo usando ajax ricordati di chiamare

$(form).valid()

che restituisce vero o falso (ed esegue la convalida effettiva) prima di inviare il modulo.

aggiungilo al tuo _Layout.cshtml

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

Sorprendentemente, quando ho visualizzato questa domanda, i documenti ufficiali di ASP.NET non avevano ancora alcuna informazione sul parse()metodo discreto o su come usarlo con contenuto dinamico. Mi sono preso la libertà di creare un problema nel repository della documentazione (facendo riferimento alla risposta originale di @ Nadeem) e di inviare una richiesta pull per risolverlo. Queste informazioni sono ora visibili nella sezione di convalida lato client dell'argomento di convalida del modello.

prova questo:

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

Sono stato colpito dallo stesso problema e niente ha funzionato tranne questo:

$(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);
}

e aggiungi

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

dove stai cercando di salvare il modulo.

Stavo salvando il modulo tramite una chiamata Ajax.

Spero che questo possa aiutare qualcuno.

basta copiare di nuovo questo codice alla fine del codice modale

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

;)