JavaScript – Walidacja formularza – część 2

Walidacja pól formularza przy użyciu języka JavaScript.

W pierwszej części postu dokonaliśmy walidacji formularza z wieloma polami w większości tekstowymi. Poza tymi, które umieściliśmy w poprzedniej części posta tzn. polami typu text i radio, w formularzu mogą się jeszcze pojawić pola typu checkbox, lista rozwijana czyli pole typu select, a także pole typu textarea (wydzielony obszar na dłuższą odpowiedź).

W tej części walidacji formularza zajmiemy się właśnie walidacją tych trzech wymienionych typów pól formularza.

Naszym celem jest tak wyglądający formularz wyświetlający wprowadzone dane po sprawdzeniu ich poprawności (walidacji):

checkboxselecttextareajs

Zaczynamy od stworzenia struktury formularza w języku HTML:

Czy cieszysz się z nadchodzących wakacji?

<br>
<br>

<input type=”checkbox” id=”yes”> Tak </input>

<input type=”checkbox” id=”no”> Nie </input>

<br>
<br>

Wybierz swój ulubiony sport:

<select id=”sport”>
<option value=””> </option>

<option value=”Piłka nożna”> Piłka Nożna </option>

<option value=”Koszykówka”> Koszykówka </option>

<option value=”Siatkówka”> Siatkówka </option>

</select>

<br>
<br>

Gdzie jedziesz na wakacje?

<br>
<br>

<textarea size=”20″ id=”wakacje”> </textarea>

<br>
<br>

<input type=”submit” value=”Wyślij” onclick=”sprawdzenie()”> </input>

<br>
<br>

<div id=”dane”> </div>

Na początek tworzymy pola typu checkbox nadając im odrazu id, które będą nam potrzebne przy walidacji w JavaScript. Następnie tworzymy listę rozwijaną przy użyciu znaczników <select> </select> (nadajemy id potrzebny przy walidacji) wewnątrz których umieszczane 4 opcje do wybrania <option> </option> (dodając przy nich atrybut value, którego użyjemy przy walidacji). Do wybrania mamy 3 sporty oraz mamy 1 opcję pustą,  która wybrana jest domyślnie (co będzie pomocne przy warunku, kiedy nie zostanie wybrany żaden sport). Na koniec tworzymy pole tekstowe <textarea> </textarea> określając rozmiar size i nadajemy id konieczny przy walidacji. Poza tym mamy jeszcze przycisk, pole typu submit zawierający odwołanie do funkcji wywołanej po kliknięciu onclick oraz utworzony mamy jeszcze blok div wewnątrz którym pokażą się wprowadzone dane po walidacji.

Przechodzimy do skryptu JavaScript(umieszczamy go wewnątrz znaczników <script> </script>):

Zaczynamy od utworzenia funkcji, a wewnątrz niej na początku tworzymy zmienne:

function sprawdzenie()
{
var opinia = “”;

var sport = document.getElementById(“sport”).value;

var wakacje = document.getElementById(“wakacje”).value;

}

Tworzymy zmienną np. o nazwie opinia, która początkowo będzie pusta. Będzie ona później przechowywała odpowiedź na pierwsze pytanie formularza. Do zmiennej sport przypisujemy wybrany z listy sport(skrypt wypisując zmienną sport wypisze to co przypiszemy jako value przy danym <option> </option> na liście <select> </select>), a do zmiennej wakacje przypisujemy wartość pola tekstowego.

Zajmujemy się walidacją, zaczynając od pól typu checkbox:

if(document.getElementById(“yes”).checked == true && document.getElementById(“no”).checked == true)
{
alert(“Wybierz tylko jedną odpowiedź na pytanie!”);
}

if(document.getElementById(“yes”).checked == false && document.getElementById(“no”).checked == false)
{
alert(“Wybierz odpowiedź na pytanie!”);
}

if(document.getElementById(“yes”).checked == true)
{
var opinia = “Tak”;
}

if(document.getElementById(“no”).checked == true)
{
var opinia = “Nie”;
}

Najpierw określamy, że jeżeli użytkownik wybierze obydwie odpowiedzi (Tak i Nie) zostanie wyświetlony odpowiedni komunikat alert, natomiast jeżeli użytkownik w ogóle nie zaznaczy odpowiedzi także dostanie komunikat. Przy zaznaczeniu jednej odpowiedzi w zależności od tego, która to była odpowiedź (Tak czy Nie) do zmiennej opinia zostanie przypisana odpowiednia wartość.

Następnie sprawdzenie listy:

if(document.getElementById(“sport”).value == “”)
{
alert(“Wybierz swój ulubiony sport!”);
}

Odwołaliśmy się tutaj do atrybutu value dodanym do znacznika <option> </option>. Jeżeli pobrana wartość będzie pusta “” użytkownik dostanie odpowiedni komunikat. W przypadku zaznaczenia danego sportu (o czym mowa była wyżej) do zmiennej sport zostanie automatycznie przypisana wartość określona jako value co zrobiliśmy już przy definiowaniu zmiennej na początku skryptu.

Ostatnim polem do sprawdzenia jest pole tekstowe <textarea> </textarea>:

if(wakacje.length < 2)
{
alert(“Napisz gdzie jedziesz na wakacje!”);
}

Jeżeli długość zmiennej wakacje( do której przypisaliśmy wartość wprowadzoną przez użytkownika do pola tekstowego) jest mniejsza od 2 wtedy użytkownik dostanie odpowiedni komunikat. W związku z tym warunkiem nasuwa się pytanie dlaczego mniejsza od 2 a nie od 1? Dlatego mniejsza od 2 ponieważ pole tekstowe domyślnie zawiera 1 znak, który jest znakiem początku nowej linii.

Skrypt kończymy wysyłając do bloku <div> </div> nasze sprawdzone dane:

Efektem końcowym jest formularz z walidacją:

checkboxselecttextareajs

Plik do pobrania: walidacja2

 

 

 

 

Dodaj komentarz