validazione lato client jQuery non funzionante in vista parziale MVC3

Question

Non riesco a vedere la convalida lato client con la seguente vista parziale. Questa vista è all'interno div divettings div nella vista genitore. Ho provato un sacco di cose da StackOverflow e altri siti, niente sembra funzionare. Qualche idea?

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 


@using (Ajax.BeginForm("CreateT", "TAdmin", null, 
     new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divTSettings"}, 
         new { id = "CreateTForm" })) 
{ 
    <div> 
     <label>Name:</label> 
     <input type="text" name="tName" id="tName"/> 
     @Html.ValidationMessage("tName") 
     <input type="submit" value="Submit"/> 
    </div> 
} 

<script type="text/javascript"> 
$(function() { 
    $('#CreateTForm').validate({ 
     rules: { 
      tName: { 
       required: true 
      } 
     }, 
     messages: { 
      tName: { 
       required: 'Name required' 
      } 
     } 
    }); 
    $("#CreateTForm").removeData("validator"); 
    $("#CreateTForm").removeData("unobtrusiveValidation"); 
    $.validator.unobtrusive.parse("#CreateTForm"); 
}); 
</script> 

Answer 1

Tutte le idee?

Sì, la prima cosa da fare è eliminare tutti i tag <script> dalla vista parziale. Le viste parziali non dovrebbero contenere alcuno script. Le viste parziali dovrebbero contenere solo il markup. L'ho ripetuto molte volte e vedo ancora persone che mettono script in-là. Gli script devono essere registrati nel proprio layout o nella vista principale in cui è stato eseguito il rendering parziale, probabilmente sovrascrivendo la sezione di alcuni script registrata nel proprio layout in modo che tutti gli script vengano inseriti alla fine del documento HTML, appena prima del tag di chiusura </body> . Ecco dove appartengono.

OK, ora il problema reale: la convalida non invadente non funziona immediatamente con gli elementi aggiunti dinamicamente al DOM, come ad esempio l'invio di una richiesta AJAX al server che restituisce una vista parziale e questa vista parziale viene quindi iniettata nel DOM.

Per funzionare, è necessario registrare gli elementi appena aggiunti con il framework di convalida non invadente. Per fare questo è necessario chiamare il $.validator.unobtrusive.parse sugli elementi appena aggiunti:

$("form").removeData("validator"); 
$("form").removeData("unobtrusiveValidation"); 
$.validator.unobtrusive.parse("form"); 

Si dovrebbe mettere questo codice all'interno del gestore successo AJAX che sta iniettando il parziale nel vostro DOM. Una volta che hai iniettato i nuovi elementi, chiama semplicemente questa funzione.

E se non si scrivono le richieste AJAX manualmente con jQuery ($ .ajax, $ .post, ...) ma si affidano ad alcuni Ajax.BeginForm e Ajax.ActionLink gli helper fanno il lavoro per te, lo farai è necessario abbonarsi alla callback di OnSuccess in AjaxOptions e inserire questo codice.

Answer 2

Se si desidera risolvere a livello globale, questo dovrebbe essere d'aiuto. Ho usato in _layout.cstml.

$(document).ajaxStart(function() { 
       $.ajaxSetup({ 
        converters: { 
         "text html": function (textValue) { 
          if (textValue) { 
           // Some parsing logic here 
           var script = "<script type='text/javascript' language='javascript' > $.validator.unobtrusive.parse(\"form\");"; 
           var scriptend = "\<\/script>"; 
           return script + scriptend + " " + textValue; 
          } else { 
           // This will notify a parsererror for current request 
           throw exceptionObject; 
          } 
         } 
        } 
       }); 
      });