Próbuję dodać walidację do mojego formularza za pomocą wtyczki jQuery Validation Plugin, ale mam problem z tym, że wtyczka umieszcza komunikaty o błędach, gdy używam grup wejściowych.
$('form').validate({
rules: {
firstname: {
minlength: 3,
maxlength: 15,
required: true
},
lastname: {
minlength: 3,
maxlength: 15,
required: true
}
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
}
});
Mój kod: http://jsfiddle.net/hTPY7/4/
twitter-bootstrap
jquery-validate
twitter-bootstrap-3
Miguel Borges
źródło
źródło
Odpowiedzi:
aby uzyskać pełną zgodność z programem bootstrap 3 na Twitterze, muszę zastąpić niektóre metody wtyczek:
Zobacz przykład: http://jsfiddle.net/mapb_1990/hTPY7/7/
źródło
resetForm()
walidatora formularza nie będzie wywoływaćunhighlight
nieprawidłowych elementów, co powoduje koniecznośćhas-error
ręcznego usunięcia klasy podczas resetowania formularza. To, co robię, to wywołanie następującej funkcji zamiast bezpośredniego wywoływania walidatoraresetForm()
:function resetForm(form_id) { $(form_id).find(".form-group").removeClass("has-error"); $(form_id).data('validator').resetForm(); }
else if (element.prop('type') === 'radio') { error.insertBefore(element.parent().parent()); }
Dla pełnej kompatybilności z Bootstrap 3 dodałem obsługę grup wejść , radia i pola wyboru , czego brakowało w innych rozwiązaniach.
Aktualizacja 10/20/2017 : przejrzano sugestie innych odpowiedzi i dodano dodatkowe wsparcie dla specjalnych znaczników wbudowanego radia , lepsze umieszczanie błędów dla grupy radiotelefonów lub pól wyboru oraz dodano obsługę niestandardowej klasy .novalidation, aby zapobiec walidacji kontroli. Mam nadzieję, że to pomoże i dziękuję za sugestie.
Po dołączeniu wtyczki walidacyjnej dodaj następujące wywołanie:
Działa to dla wszystkich klas formularzy Bootstrap 3. Jeśli używasz formularza poziomego, musisz użyć następującego znacznika. Gwarantuje to, że tekst bloku pomocy będzie zgodny ze stanami walidacji („has-error”, ...) grupy formularzy .
źródło
errorClass: "help-block error-help-block"
. Używałem już .help-block do regularnego uzyskiwania informacji pomocy, a to zastępowało go komunikatami walidacji formularza. Dodanie drugiej klasy uczyniło ją wyjątkową, więc teraz zamiast nadpisywać moją „prawdziwą” wiadomość pomocy, dodaje ją do wiadomości.Używam formularzy zaprojektowanych tylko z Twitter Bootstrap 3. Ustawiam domyślne funkcje dla walidatora i uruchamiam tylko metodę walidacji z regułami. Używam ikon z FontAweSome, ale możesz użyć Glyphiconów, jak w przykładzie z doc.
Gotowe. Po uruchomieniu funkcji walidacji:
Przykład JSFiddle
źródło
Dodając do powyższej odpowiedzi Miguela Borgesa, możesz dać użytkownikowi zieloną informację zwrotną o sukcesie, dodając następujący wiersz do w bloku kodu podświetlenia / usunięcia.
źródło
to jest rozwiązanie, którego potrzebujesz, możesz użyć
errorPlacement
metody, aby zastąpić, gdzie umieścić komunikat o błędziedziała na mnie jak magia. Twoje zdrowie
źródło
error.insertAfter('.form-group');
umieścić błędy we wszystkich .form-group. ale pokazał mi pomysł. dziękujędla bootstrap 4 to działa ze mną dobrze
mam nadzieję, że to pomoże!
źródło
validClass: 'valid-feedback'
Oto, czego używam podczas dodawania walidacji do formularza:
To zadziałało w przypadku stylizacji Bootstrap 3 podczas korzystania z biblioteki walidacji jquery.
źródło
Użyłem tego do radia:
w ten sposób błąd jest wyświetlany pod ostatnią opcją radiową.
źródło
Wiem, że to pytanie dotyczy Bootstrap 3, ale ponieważ niektóre pytania związane z Bootstrap 4 są przekierowywane do tego jako duplikaty, oto fragment zgodny z Bootstrap 4:
Kilka różnic to:
has-danger
zamiasthas-error
źródło
.has-*
klas. getbootstrap.com/docs/4.3/migration/#forms-1W przypadku wersji beta bootstrap 4 nastąpiły duże zmiany między wersją alfa i beta bootstrapa (a także bootstrap 3), zwł. w zakresie walidacji formularzy.
Po pierwsze, aby poprawnie umieścić ikony, musisz dodać styl, który jest równy temu, co było w bootstrap 3, a nie w wersji beta bootstrap 4 ... oto czego używam
Klasy również się zmieniły, ponieważ wersja beta używa „stanu” kontrolki, a nie klas, których Twój opublikowany kod nie odzwierciedla, więc powyższy kod może nie działać. W każdym razie musisz dodać klasę „została zweryfikowana” do formularza w wywołaniach zwrotnych dotyczących sukcesu lub podświetlenia / wyłączenia podświetlenia
Poleciłbym również użycie nowego elementu i klas dla tekstu pomocy dotyczącego kontroli formularza
źródło
To tworzy pola
źródło
dodaj poprawkę radiową do tego https://stackoverflow.com/a/18754780/966181
źródło
Odpowiedź DARK_DIESEL była dla mnie świetna; oto kod dla każdego, kto chce odpowiednika używającego glifikonów:
źródło
Spróbuj użyć tego przykładowego kodu. Korzystanie z wtyczki do walidacji Jquery i dodatkowych metod. To jest działający kod dla mojego projektu. Mam nadzieję, że to ci pomoże
źródło
Inną opcją jest wcześniejsze umieszczenie kontenera błędów poza grupą formularzy. W razie potrzeby walidator użyje go.
źródło