Utilizzando la convalida non invadente in ASP.NET MVC 3, come posso intervenire quando un modulo non è valido?

Question

Ho una pagina con le schede dell'interfaccia utente jQuery e un singolo campo obbligatorio nella prima scheda. La validazione funziona e il messaggio di convalida viene visualizzato accanto al campo se l'utente non ha inserito un valore. Tuttavia, se l'utente non è nella prima scheda, non è ovvio che il campo non sia valido.

In questo caso, vorrei mostrare la prima scheda, ma non sono sicuro di come procedere registrando una richiamata per un evento 'non valido', se ce n'è uno.

Ho anche considerato di mostrare un riepilogo di convalida sopra le schede, che sarebbe visibile indipendentemente dalla scheda in cui si trova l'utente, ma la mia preferenza sarebbe quella di portare l'utente sul campo.

Ho provato a cercare nel file jquery.validate.unobtrusive.js e sembra estendere jquery.validate.js. Guardando la documentazione di jquery.validate, vedo che esiste un'opzione invalidHandler che può essere passata allo validate method, ma non so come utilizzarlo poiché il metodo è chiamato da jquery.validation.unobtrusive.

Mi sento un po 'perso qui, quindi qualsiasi aiuto sarebbe apprezzato!

Modifica

Non ho mai capito la risposta, ma è venuto su con una soluzione, che ho postato qui sotto. Comunque, spero che qualcuno risponda con un modo migliore per farlo.

Answer 1

ho finito per la convalida e presentando il modulo manualmente:

$("#save-button").button().click(function() { 
    if (!$("#profile-form").valid()) { 
     if ($("#tabs").tabs("option", "selected") > 0) { 
      $("#tabs").tabs("option", "selected", 0); 
     } 
     return false; 
    } 
    $("#profile-form").submit(); 
}); 

Answer 2

si potrebbe voler search per la funzione errorPlacement()

Answer 3

provare ad aggiungere un nuovo adattatore a discreto.

Il mio markup è diverso perché ho utilizzato Telerik anziché l'interfaccia utente di JQuery per creare le schede. Ecco quello che la mia marcatura sembrava dopo il passaggio attraverso Validator (vale a dire, con errori di convalida inseriti attraverso lo script discreto)

<div id="rItemTabs"> 

    <ul> 
     <li><a href="#rItemTabs-1">Tab 1</a></li> 
     <li><a href="#rItemTabs-2">Tab 2</a></li> 
    </ul> 
    <!-- End Tab Nav--> 

    <!-- Begin Tab Contents --> 
    <div id="rItemTabs-1"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

    <div id="rItemTabs-2"> 
     <div class="editor-label"> 
      <label for="Title">Title</label> 
     </div> 
     <div class="editor-field"> 
      <input id="Title" class="input-validation-error name="Title"> 
      <span class="field-validation-error">*</span> 
     </div> 
    </div> 

</div> 

L'obiettivo di questo script è quello di passare attraverso ogni div in "Contenuto scheda", cercare il " campo-validation-error "class (che dovrebbe esistere solo se c'è un errore), e se questa classe è stata trovata cambia il colore della voce Tab Nav associata (cioè l'id del contenuto della scheda è lo stesso del href della tab oggetto nav).

$.validator.unobtrusive.adapters.add(
    'tab-validation', 
    function() { 
     var tabs = $('#rItemTabs [id*=rItemTabs]'); 
     $(tabs).each(function() { 
     if ($(this).has('.field-validation-error').length) { 
      var tabId = '#' + $(this).attr('id'); 
      $('a[href=' + tabId + ']').css({ 'color': 'red', 'font-weight': 'bolder' }); 
     } 
    }); 
} (jQuery)); 

Spero che questo abbia senso e funzioni per voi.

Answer 4

Questo codice preso da here farà ciò che si vuole:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myForm").submit(function() { 
      $("#tabs").tabs("select", $("#myForm .input-validation-error").closest(".ui-tabs-panel").get(0).id); 
     }); 
    }); 
</script> 

Avrai bisogno al la prima scheda che contiene un errore. E 'lavorando molto in un progetto che sto sviluppando ...

Answer 5

ecco la soluzione che ha funzionato per me:

<button type="submit" onclick="ValidateRequired();">Save</button> 

function ValidateRequired(){ 
    $(':input[required]', '#myForm').each(function(){ 
     if ($(this).val() == ''){ 
      var errorTab = $(this).closest('div').attr('id'); 
      $('#tabs').tabs('select', '#'+errorTab); 
     } 
    }); 
}