La unobtrusive validation ha il pregio di mantenere separato il markup HTML dal codice javascript necessario a implementare le logiche di validazione lato client. Ciò è possibile grazie a una serie di attributi personalizzati, identificati dal prefisso data-val-*, che vengono automaticamente aggiunti agli elementi che devono essere validati:

<div class="editor-field">
  <input type="text" value="" id="FirstName" 
         data-val="true" data-val-required="The FirstName field is required." />
  <span data-valmsg-for="FirstName" data-valmsg-replace="true"></span>
</div>

L'engine responsabile della unobtrusive validation, al caricamento della pagina, effettua automaticamente il parsing di questi attributi, preoccupandosi poi di aggiungere gli handler e le logiche di controllo necessarie.

Quando carichiamo una view tramite AJAX, per esempio sfruttando l'helper Ajax.ActionLink, l'operazione di parsing di questi attributi è stata già eseguita e, pertanto, il risultato è che la validazione lato client non sarà attiva. Per evitare questo problema, è sufficiente eseguire un'opportuna funzione Javascript al termine del caricamento:

<script type="text/ecmascript">
  function initializeValidation() {
    $.validator.unobtrusive.parse('#contentDiv');
  }
</script>

<div>
  @Ajax.ActionLink("New person", "Create", 
     new AjaxOptions() 
     { 
       UpdateTargetId = "contentDiv", 
       OnSuccess="initializeValidation" 
     })
</div>

<div id="contentDiv"></div>

Nella codice in alto, abbiamo definito una funzione initializeValidation che forza la rilettura degli attributi della unobtrusive validation sul contenuto di contentDiv. Essa verrà automaticamente eseguita al termine del caricamento della nuova view, dato che l'abbiamo referenziata nelle AjaxOptions utilizzate per impostare l'helper.