jQuery: walidacja danych w formularzu cz. I

Autor: Arkadiusz Tobiasz 18 marca 2010

Dzisiaj postaram się Wam pokazać w jaki sposób z wykorzystaniem jQuery i pluginu Validation stworzyć walidację danych, które są wprowadzane do formularza na np. naszej stronie. W taki sposób użytkownik będzie wiedział jakie pola są musi wypełnić, jakie są źle wypełnione, a nawet jakie są dobrze uzupełnione.

Tradycyjnie w sekcji <head>…</head> naszego skryptu umieszczamy trzy linijki:

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.6/jquery.validate.js"></script>
<link href="style.css" media="screen" rel="stylesheet" type="text/css">

Dzięki pierwszej linijce możemy korzystać z biblioteki jQuery (plik ten można również ściągnąć i umieścić lokalnie na swojej stronie, np. w katalogu js/). Sama biblioteka nam jednak nie wystarczy, bowiem w kolejnej linijce ładujemy odpowiedni plugin Validation wykorzystujący załadowaną wcześniej bibliotekę (plik ten również można ściągnąć i umieścić na swoim serwerze). Polecam, aby te pliki umieścić na swoim serwerze i tak się do nich odwoływać, gdyż wtedy możecie być pewni, że czasem nie znikną. Ostatnia linijka to odwołanie do stylu, który wygląda np. tak:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
.form-div {
  border: 1px #ccc solid;
  padding: 10px;
  width: 650px;
}

.form-div .submit {
  margin-left: 155px;
  margin-top: 10px;
}

.form-div .label {
  display: block;
  float: left;
  width: 150px;
  text-align: right;
  margin-right: 5px;
}

.form-div .form-row {
  padding: 5px 0;
  clear: both;
  width: 700px;
}

.form-div label.error {
  width: 250px;
  display: block;
  float: left;
  color: red;
  padding-left: 10px;
}

.form-div input[type=text], select, textarea {
  width: 250px;
  float: left;
}

.form-div textarea {
  height: 50px;
}

Następnie musimy stworzyć jakiś formularz, w którym będziemy sprawdzać wprowadzane przez użytkownika dane. Przykładowy kod:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="form-div">
    <form id="form1" method="post" action="">
        <div class="form-row">
      <span class="label">Imię *</span>
      <input type="text" name="name">

        </div>
        <div class="form-row">
      <span class="label">Adres e-mail *</span>
      <input type="text" name="email">
        </div>
        <div class="form-row">
      <span class="label">Strona WWW</span>
      <input type="text" name="url">

        </div>
        <div class="form-row">
      <span class="label">Komentarz *</span>
      <textarea name="comment"></textarea>
        </div>
        <div class="form-row">
      <input class="submit" type="submit" value="Dodaj">
        </div>

    </form>
</div>

Jak już się zapewne domyśliłeś jest to formularz dodawania jakiegoś komentarza. Czas zająć się tematem tego wpisu, czyli walidacją. Musimy w sekcji <head>…</head> stworzyć odpowiednie reguły walidacji, czyli określić które pola mają być sprawdzane oraz pod jakim kątem ma owo sprawdzenie nastąpić. W związku z tym pod linijkami, które wprowadziliśmy na samym początku wpisujemy:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 <script type="text/javascript">
SubmittingForm=function() {
    alert("Wszystkie dane sa poprawne.");
}
$(document).ready(function() {
            $("#form1").validate({
                submitHandler:function(form) {
                    SubmittingForm();
                },
                rules: {
                    name: "required",       // simple rule, converted to {required:true}
                    email: {                // compound rule
                        required: true,
                        email: true
                    },
                    url: {
                        url: true
                    },
                    comment: {
                        required: true
                    }
                },
                messages: {
                    comment: "Wprowadz komentarz."
                }
            });
        });
</script>

W pierwszych linijkach wyświetlamy komunikat jeżeli wszystkie dane w formularzu zostały wprowadzone poprawnie. Wewnątrz podstawowej funkcji $(document).ready(function() zagnieździliśmy funkcję $(„#form1”).validate, gdzie #form1 to nazwa identyfikatora jaki został nadany naszemu formularzowi. Następnie określamy reguły walidacji. Każde pole input w naszym formularzu posiada atrybut name i właśnie wykorzystując jego nazwę odnosimy się do niego podczas tworzenia reguł walidacji.

1
 name: "required",

Powyższy zapis oznacza, że pole Imię jest wymagane i musi w nie zostać coś wpisane. Zawartość tego pola nie jest już w żaden sposób weryfikowana.

1
2
3
4
email: {
          required: true,
       email: true
}

Pole Adres e-mail oprócz tego, że jest polem wymaganym, to dodatkowo sprawdzana jest poprawność wpisanego adresu e-mail. Dzieję się tak, ponieważ parametr email ustawiliśmy na true. Plugin Validation oferuje nam kilkanaście parametrów. Poniżej podaje najważniejsze z nich wraz z przykładowymi wartościami.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
minlength: 4 // minimalna ilość znaków to 4
maxlength: 15 // maksymalna ilość znaków to 15
rangelength: [4, 15] // liczba znaków musi się zawierać między 4 a 15
min: 18 // wartość musi być większą lub równa 18
max: 50 // wartość musi być mniejsza lub równa 50
range: [18, 50] // wartość musi być z przedziału 18, 50
email: true // sprawdza czy podano adres e-mail
url: true // sprawdza czy podano poprawny adres URL
date: true // sprawdza format daty: dd/mm/rrrr
dateISO: true // sprawdza format daty: rrrr/mm/dd lub rrrr-mm-dd
dateDE: true // sprawdza format daty: dd.mm.rr lub dd.mm.rrrr
digits: true // sprawdza czy podany tylko cyfry
number: true // sprawdza czy podano liczbę w formacie 00.00
numberDE: true // sprawdza czy podano liczbę w formacie 00,00

Plugin umożliwia nam również podanie własnych komunikatów jakie mają się pojawiać w przypadku wprowadzenia złych danych za pomocą poniższego kodu.

1
2
3
messages: {
        comment: "Wprowadz komentarz."
}

W przypadku pozostawienia pola pustego po wysłaniu formularza powinien nam się pojawić odpowiednia informacja. Możemy wprowadzić dla danego pola kilka informacji w zależności co zostało źle wprowadzone. Gdyby np. w polu komentarz można było wprowadzać tylko liczby i minimalna liczba znaków wynosiłaby 10, to powyższy kod wyglądał by tak:

1
2
3
4
5
6
7
messages: {
        comment: {
                        required: "Wprowadz komentarz.",
                        minlength: "Za mało znaków",
                        digits: "Wprowadz tylko cyfry"
               }
}

Dodatkowo w komentarzach możemy również podać jaka jest minimalna liczba znaków. W związku z tym powyższą, środkową linijkę modyfikujemy:

1
minlength: jQuery.format("Minimalna liczba znakow: {0}")

Oprócz tego możemy wyświetlać także informacje o tym, że pole zostało dobrze wyświetlone. W tym celu do naszego pliku stylu dodajemy:

1
2
3
4
5
6
7
8
9
.label.valid {
    background: url('../images/checked.gif') no-repeat;
    float:right;
    color: #000;
    width:263px;
    text-align:left;
    height: 16px;
    padding-left: 18px;
}

Musimy również zmodyfikować naszą funkcję $(„#form1”).validate i dodać po ({ następujące linijki:

1
2
3
success: function(label) {
        label.addClass("valid").text("ok")
},

Oczywiście plugin oferuje nam o wiele więcej możliwości, ale o tym kiedy indziej. Na zakończenie działające demo.

komentarzy 15

  1. Prasoł napisał(a):

    Właśnie takiego pluginu szukałem. Dzięki

  2. sarin napisał(a):

    Witam.
    Siedzę już którąś godzine nad tym pluginem i sprawdzam czemu nie działa mi ani dodawanie, ani ustawianie ruli oraz wiadomości w tym walidatorze.
    Doszło teraz do mnie po przejrzeniu dema, że przykładowo:
    messages: {
    imie:{
    required: „To pole jest wymagane.”
    }

    tyczy się pola o name=”imie” a nie id=”imie”
    jednak ja w calym moim formularzu pola nazywam np: user[imie]
    aby całą tablicę danych uzytkownika przekazać za jednym razem do klasy dodającej go do bazy.

    Jak mogę w tym pluginie ustawić właściwości pola user[imie] ? czy moze zamiast podawac nazwe moge podać id ?
    Z góry dziękuje za pomoc.

  3. Przemo napisał(a):

    Witam,
    Mam „drobny” problem. Mam w formularzu pole checkbox ze zgodą na gromadzenie i przetwarzanie danych osobowych. W tym przypadku error wyskakuje mi po lewej stronie checkboxa zamiast z lewej. Jak można to zmienić.
    Pozdrawiam
    Przemo

  4. Przemo napisał(a):

    Witam serdecznie,
    W jaki sposób zmienić wyświetlenie alertu „Wszystkie dane sa poprawne.” na wywołanie pliku zdefiniowanego w „action=” formularza?

    Pozdrawiam
    Przemo

    • Arkadiusz Tobiasz napisał(a):

      należy wykasować

      1
      2
      3
      SubmittingForm=function() {
          alert("Wszystkie dane sa poprawne.");
      }

      i jeśli wszystkie dane będą poprawne, to przejdzie do strony zdefiniowanej w „action”.

  5. Przemo napisał(a):

    Wita,
    Dziękuję za pomoc w poprzednich zapytaniach.
    Mam jeszcze jedno pytanie. W jaki sposób sprawdzić czy wpisana liczba (8 cyfr) na czwartym miejscu ma wpisaną cyfrę 1, czyli ma postać np. 73614732?

    Pozdrawiam
    Przemo

  6. Wruum napisał(a):

    No dobrze ale często czytam w sieci o formularzach, które będąc validowane tylko przez javascript, w przypadku wyłączenia javascript umożliwiają wysłanie treści.

    Więc jak ma wyglądać sama funkcja wysyłająca i pobierająca dane z formularza by zapobiec takiemu procederowi? Oczywiście chodzi mi o formularz kontaktowy.

    • Arkadiusz Tobiasz napisał(a):

      w tej sytuacji oczywiście trzeba również zrobić walidację po stronie serwera. najlepiej napisać odpowiednią klasę w PHP, która będzie odpowiedzialna za prawidłową walidację.

  7. Rafał napisał(a):

    Bardzo przydatny tutorial. Krótko, zwięźle i na temat. Właśnie czegoś takiego szukałem. Dobra robota!

  8. […] czasu minęło odkąd wspomniałem o pluginie Validate do jQuery. Jako, że zapowiedziałem kontynuację tematu, to słowa dotrzymuje. W tym wpisie spróbuje […]

  9. amok napisał(a):

    Witam,
    fajny tut.w jaki sposób alert wyświetlić w divie który jest w zupełnie innej części strony?

    pozdrawiam

    • Arkadiusz Tobiasz napisał(a):

      jest taka możliwość, odsyłam do przykładowego dema: http://jquery.bassistance.de/validate/demo/marketo/step2.htm

      szczególnie warto zainteresować się tym fragmentem:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      jQuery.validator.messages.required = "";
          $("form").validate({
              invalidHandler: function(e, validator) {
                  var errors = validator.numberOfInvalids();
                  if (errors) {
                      var message = errors == 1
                          ? 'You missed 1 field. It has been highlighted below'
                          : 'You missed ' + errors + ' fields.  They have been highlighted below';
                      $("div.error span").html(message);
                      $("div.error").show();
                  } else {
                      $("div.error").hide();
                  }
              },

Odpowiedz

 

Arkadiusz Tobiasz student Akademii Ekonomicznej im. Karola Adamieckiego w Katowicach na specjalnościach informatyka ekonomiczna oraz rachunkowość. Więcej...

jQuery Validation i funkcja remote

Jakiś czas temu zwrócił się do mnie użytkownik z problemem. Chodzi o to, że korzysta on z pluginu walidacji jQuery, […]

Zend Framework: integracja z Uploadify

W tym wpisie postaram się przedstawić Wam w jaki sposób zintegrować skrypt Uploadify z Zend Frameworkiem. Dzięki temu będziemy mogli […]

Javascript: Czasowe wyświetlanie reklamy

Czasami chcemy, aby na pewnym elemencie naszej strony wyświetlała się reklama przez jakiś czas, a następnie zniknęła. W tym wpisie […]

Linux: backup wszystkich baz danych MySQL

Swego czasu pisałem o tym jak z poziomu konsoli można szybko i przyjemnie zrobić backup bazy MySQL. Wszystko jest ładnie […]