Korzystając z dyskretnego sprawdzania poprawności w środowisku ASP.NET MVC 3, jak mogę podjąć działanie, gdy formularz jest nieprawidłowy?

Question

Mam stronę z zakładkami jQuery UI i jednym wymaganym polem na pierwszej karcie. Sprawdzanie poprawności działa, a komunikat sprawdzania poprawności pojawia się obok pola, jeśli użytkownik nie wprowadził wartości. Jeśli jednak użytkownik nie znajduje się na pierwszej karcie, nie jest oczywiste, że pole jest nieprawidłowe.

W tym przypadku chciałbym pokazać pierwszą kartę, ale nie wiem, jak zarejestrować wywołanie zwrotne dla zdarzenia "nieważnego", jeśli takie istnieje.

Rozważałem również wyświetlenie podsumowania weryfikacji nad zakładkami, które byłoby widoczne niezależnie od zakładki, na której użytkownik jest zalogowany, ale moją preferencją byłoby zabranie użytkownika do tego pola.

Próbowałem już przejrzeć plik jquery.validate.unobtrusive.js i wydaje się, że rozszerza on plik jquery.validate.js. Patrząc na dokumentację jquery.validate, widzę opcję invalidHandler, którą można przekazać do validate method, ale nie wiem, jak z niej skorzystać, ponieważ ta metoda jest wywoływana przez jquery.validation.unobtrusive.

Czuję się trochę zagubiony, więc każda pomoc będzie doceniona!

Edit

nigdy nie zorientowali się odpowiedź, ale nie wymyślić obejście, co napisałem poniżej. Mam jednak nadzieję, że ktoś odpowie na to lepiej.

Answer 1

errorPlacement() skończyło się na walidacji i ręcznie wysłaniu formularza:

$("#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

może chcesz search dla funkcji

Answer 3

spróbować dodać nowy adapter do dyskretny.

Mój znacznik wygląda inaczej, ponieważ użyłem Telerik zamiast interfejsu użytkownika JQuery do utworzenia kart. Oto co mój znaczników wyglądał jak po przejściu przez Validator (tj z błędów sprawdzania poprawności wprowadzonych przez dyskretny skrypt)

<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> 

Celem tego skryptu jest, aby przejść przez każdy div w zakładce „Zawartość”, spojrzeć na " field-validation-error "klasa (która powinna istnieć tylko w przypadku wystąpienia błędu), a jeśli ta klasa zostanie znaleziona, zmień kolor skojarzonego elementu Tab Nav (tzn. id zawartości karty jest taki sam jak href karty pozycja 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)); 

Mam nadzieję, że to ma sens i działa dla Ciebie.

Answer 4

Ten kod pochodzi z here będą robić to, co chcesz:

<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> 

Zabierze cię na pierwszej karcie, która ma błąd. To działa świetnie w projekcie Zajmuję ...

Answer 5

Oto rozwiązanie, które pracował dla mnie:

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