post_ico1

Walidacja checkboxów a HTML5

Wraz z pojawieniem się HTML5 walidacja formularzy stała się znacznie bardziej przyjemniejsza. Przynajmniej walidowanie prostych formularzy można oprzeć w pełni na HTML5. Jednakże, HTML5 ma czasem „problemy” nawet z prostymi rzeczami – np. checkboxami.

Problem występuje, gdy w formularzu musi istnieć możliwość zaznaczenia wielu opcji (np. przy polach do wybrania zainteresowań). Na szczęście możemy to „obejść” prostym skryptem jQuery :)

$('input[name="input_name[]"]').click(function() {
    if($('input[name="input_name[]"]:checked').length) {
        $('input[name="input_name[]"]').removeAttr('required');
    } else {
        $('input[name="input_name[]"]').attr('required', 'required');
     }
});

Podczas kliknięcia na polu przez użytkownika skrypt sprawdza ilość zaznaczonych pól. Jeżeli jest zaznaczone co najmniej jedno pole, zostanie usunięty atrybut required. W przeciwnym wypadku zostanie on dodany :).

Co sądzisz o wpisie?
BeżnadziejnySłabyŚredniDobryBardzo dobry (Brak ocen, bądź pierwszy!)
Loading...
  • Darek

    Nie za duzo razy tworzysz kolekcje jQuery na _tym samym_ selektorze?
    required to wlasciwosc, nie atrybut – uzywaj do tego wlasciwej metody jQuery

    • Tzn? Mógłbyś bardziej to rozwinąć?

      • Łukasz

        Chodzi o użycie $().attr(‚required’, ‚required’) na inpucie, na którym powinno się użyć $().prop(‚required’, true).
        Na inputach required, selected, checked to nie są zwykłe atrybuty, użycie do nich $().attr() może powodować błędy i nieprzewidywalne zachowanie wśród przeglądarek.