Uwaga:
To pytanie odnosi się do bardzo starej wersjijQuery.validate () (wersja 1.5). Ta wtyczka zapewnia teraz wbudowane rozwiązanie do tego: the.rules() metoda które powinny być użyte zamiast tego. Pozostawiam to pytanie i odpowiedź w oryginalnej postaci dla celów historycznych dla każdego, kto potrzebuje utrzymywać starszą stronę, która nie jest w stanie uaktualnić do najnowszych wersji jQuery i jQuery.validate ().

Mam formularz, który przełącza widoczne elementy wejściowe. Chcę potwierdzićtylko widoczne elementy formularza.

Mam trudności z poprawnym działaniem tego. Chcę wyłączyć walidatory dla niewidocznych elementów i nie mogę znaleźć najlepszego sposobu, aby to zrobić. Doceniłbym każdy wgląd w to, co może być nie tak z moim kodem lub moje podejście.

Po włączeniu widoczności wypróbowałem kilka rzeczy:

Powołanie$("form").rules("remove") wyczyścić wszystkie istniejące zasady walidacji. Zgłasza to „niezdefiniowany” wyjątek JavaScript.Powołanie$("form").validation(...options...) dla widocznych elementów, mając nadzieję, że to nadpisze reguły. Pozwala to tylko pierwszej grupie, która została zatwierdzona, działać. Drugi panel nie może zostać zatwierdzony.Odłączanie programu obsługi przed wysłaniem nowegovalidation() metoda. To nie zrobiło tego, co bym pomyślał. Usuwa wszystkie weryfikacje (pozornie) na stałe, a formularz przesyła się bez walidacji.Czyszczenie obiektu sprawdzania poprawności za pomocą$.removeData($('form'), 'validator') przed próbą ponownego wywołania walidatora. To również nie działa.To jest w witrynie ASP.NET, więc używając wielu<form /> Tagi nie wchodzą w rachubę, ponieważ złamałoby to stronę.

Jestem trochę zakłopotany tym, jak mogę wykonać tę pracę. Możesz zobaczyć kompletne działające demo tego, co mamhttp://jsbin.com/ucibe3lub edytuj go whttp://jsbin.com/ucibe3/edit. Próbowałem go rozebraćwłaśnie kod powodujący błąd.

Oto kluczowe fragmenty mojego kodu (użyj powyższych linków, aby uzyskać pełną stronę roboczą)

HTML:

<td id="leftform">
    Left Form<br />
    Input 1: <input type="text" name="leftform_input1" /><br />
    Input 2: <input type="text" name="leftform_input2" /><br />
    <input type="submit" name="leftform_submit" value="Submit Left" />
</td>
<td id="rightform" style="visibility:hidden">
    Right Form<br />
    Input 1: <input type="text" name="rightform_input1" /><br />
    Input 2: <input type="text" name="rightform_input2" /><br />
    <input type="submit" name="rightform_submit" value="Submit Right" />
</td>

JavaScript:

$('#toggleSwitch').click(function() {
    if ($('#leftform').css("visibility") !== "hidden") {
        $('#leftform').css("visibility", "hidden");
        $('#rightform').css("visibility", "visible");
        $('form').validate({
            rules: {
                rightform_input1: { required: true },
                rightform_input2: { required: true }
            },
            messages: {
                rightform_input1: "Field is required",
                rightform_input2: "Field is required"
            }
        });
    } else {
        $('#rightform').css("visibility", "hidden");
        $('#leftform').css("visibility", "visible");
        $('form').validate({
            rules: {
                leftform_input1: { required: true },
                leftform_input2: { required: true }
            },
            messages: {
                leftform_input1: "Field is required",
                leftform_input2: "Field is required"
            }
        });
    }
});