JavaScript – Walidacja formularza – część 1

Umiejętnością potrzebną na egzaminie zawodowym z kwalifikacji E.14 m.in jest stworzenie formularza wraz z jego walidacją tzn. sprawdzeniem poprawności wprowadzonych danych.

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

formjs

Do stworzenia takiego formularza będzie nam potrzebny język HTML, w połączeniu z językiem JAVA SCRIPT. Strukturę, pola formularza wykonamy za pomocą html, a wszystkie operacje na danych wykonywać będziemy za pomocą java script.

Polecenia związane z walidacją, tzw. skrypt napisany w języku java script umieścimy lokalnie w sekcji head pomiędzy znacznikami <script> </script>.

Możliwe jest także wykorzystanie zewnętrznego pliku z rozszerzeniem .js , w którym umieszczone polecenia zostaną zaimportowane do dokumentu HTML.

Zaczynamy od stworzenia formularza w dokumencie HTML oraz bloku (diva), w którym zostaną wyświetlone wprowadzone dane:

<table>
 <tr>

   <td> Imię: </td>    <td> <input type=”text” size=”8″ id=”imie”> </input> </td>

 </tr>
 <tr>

   <td> Nazwisko: </td>    <td> <input type=”text” size=”10″ id=”nazwisko”> </input> </td>

 </tr>
 <tr>

   <td> Miejsce zamieszkania: </td>    <td> <input type=”text” size=”11″ id=”msc”> </input> </td>

 </tr>
 <tr>

   <td> Płeć: </td>    <td> <input type=”radio” id=”male” name=”plec”> Mężczyzna </input>
                                               <br>
                                                 <input type=”radio” id=”female” name=”plec”> Kobieta </input> </td>

 </tr>
 <tr>

   <td> Pesel: </td>    <td> <input type=”text” size=”11″ id=”pesel”> </input> </td>

 </tr>
 <tr>

   <td> Numer telefonu: </td>    <td> <input type=”text” size=”12″ id=”numer”> </input> </td>

 </tr>
 <tr>

   <td> Adres e-mail: </td>    <td> <input type=”text” size=”10″ id=”email”> </input> </td>

 </tr>

</table>

 <br>

   <input type=”submit” value=”Wyślij”> </input>

 <br>
 <br>

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

W celu rozmieszczenia pól równo umieszczamy je w tabeli tworzonej za pomocą znacznika <table> </table>. Wewnątrz tabeli mamy <tr> </tr> – wiersze i <td> </td> – komórki.

Pola tworzymy w następujący sposób określając ich typ oraz rozmiar w przypadku pól tekstowych:

<input type=”typ pola” size=”rozmiar jeżeli to pole tekstowe” id=”identyfikator, który posłuży nam przy odwołaniu się do danego pola w skrypcie javascript”> </input>

W naszym formularzu mamy styczność z polami typu text oraz radio, czyli tymi z możliwością wyboru oraz z polem typu submit, który jest przyciskiem potwierdzającym wysłanie formularza, możemy nadać mu wartość tzn. co będzie na nim pisało dzięki znacznikowi value.

Co ważne przy polach typu radio, to to że należy nadać im atrybut name, z taką samą nazwą dla każdego radia. Robimy to żeby móc wybrać tylko jedną opcje zgodnie z naszym formularzem (wybieramy tylko jedną płeć).

Pole typu submit posłuży nam jako pewnego rodzaju włącznik skryptu. Po naciśnięciu na pole typu submit uruchomi się nasz skrypt. Do zdefiniowania pola jako włącznik dodajemy do niego zdarzenie

onClick = “nazwa funkcji, którą sobie stworzymy w javascript()”

<input type=”submit” value=”Wyślij” onClick=”spr()”> </input>

Przechodzimy do części związanej z JAVA SCRIPT.

W części nagłówkowej dokumentu HTML umieszczamy znacznik <script> </script>.  Tym razem stworzymy skrypt wewnątrz html, w następnym poście z walidacją użyjemy zewnętrznego skryptu.

Zaczynamy od stworzenia funkcji o nazwie jaką wprowadziliśmy przy polu typu submit w formularzu:

function spr()

{

 

}

Wewnątrz funkcji tworzymy zmienne, przypisując do nich dane wprowadzone w formularzu. Jedynie w wypadku pól typu radio tworzymy pustą zmienną.

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

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

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

var plec = “”;

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

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

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

Dane te pobieraliśmy poprzez identyfikatory pól odwołując się do ich wartości .value :

document.getElementById(“nazwa identyfikatora”).value;

Mamy pobrane dane, możemy się zabrać za ich walidację.

Zaczynamy od imienia:

if(imie.length < 1)
 {
   alert(“Podaj imie!”);
 }
else
 {
  if(isNaN(imie))
 {

 }
 else
{
   alert(“Imię nie może być liczbą!”);
   var imie = “”;
}
}

Jeżeli długość wprowadzonych danych jest mniejsza od 1 (tzn. nic nie wprowadzimy) imie.length < 1 zostanie wyświetlone okno alert z poleceniem podania imienia. Jeżeli jednak wprowadzimy coś wtedy zostanie sprawdzone czy wartość ta nie jest liczbą isNaN(imie), jeżeli nią nie jest nie zostaną wykonane żadne zmiany, natomiast else jeżeli będą to jakieś liczby zostanie wyświetlony komunikat alert, a zmienna imie zostanie wyczyszczona i przy późniejszym jej wyświetleniu nie będziemy mieli imienia.

To samo robimy z nazwiskiem, miejscem zamieszkania oraz numerem telefonu.

Teraz zajmiemy się polami typu radio:

if(document.getElementById(“male”).checked == false && document.getElementById(“female”).checked == false)
 {
   alert(“Wybierz płeć!”);
 }

Jeżeli pobrane za pomocą document.getElementById(“”) pola nie są zaznaczone .checked == false (warunki te łączymy za pomocą && – AND) zostanie wyświetlony komunikat.

if(document.getElementById(“male”).checked == true)
 {
   var plec = “Mężczyzna”;
 }

if(document.getElementById(“female”).checked == true)
 {
   var plec = “Kobieta”;
 }

Jeżeli jednak dane pole zostanie zaznaczone == true, wtedy to utworzonej zmiennej plec zostanie przypisana określona wartość.

if(pesel.length < 1)
 {
   alert(“Podaj pesel!”);
 }
else
 {
if(pesel.length < 11 || pesel.length > 11)
  {
   alert(“Pesel ma mieć 11 cyfr!”);
   var pesel = “”;
  }
else
  {
if(isNaN(pesel))
  {
   alert(“Pesel nie może składać się z liter!”);
   var pesel = “”;
  }
  }
 }

Jeżeli nie podaliśmy peselu zostanie wyświetlony komunikat, jeżeli podany pesel jest krótszy bądź dłuższy niż 11 znaków wtedy także otrzymamy stosowny komunikat przy czym zmienna pesel zostanie wyczyszczona. Jeżeli jednak pesel będzie miał te wymagane 11 znaków zostanie sprawdzone czy znaki te są liczbami, metoda isNaN() sprawdzi nam czy są to litery (nie-liczby) przy czym jeżeli okaże się, że wprowadzone zostały litery wyświetli się komunikat i wyczyści zmienna pesel.

Przechodzimy do adresu e-mail. Sprawdzimy czy istnieje i póki co czy zawiera znak @.

if(email.length < 1)
 {
   alert(“Podaj email!”);
 }
else
 {
if(email.indexOf(“@”) < 1)
 {
   alert(“Źle wprowadzony email!”);
   var email = “”;
 }
 }

Jeżeli nie zostanie wprowadzony e-mail zostanie wyświetlony komunikat, wprowadzony e-mail zostanie sprawdzony .indexOf(” “) czy znajduje się w nim określony znak @ minimum raz.

Na koniec zajmiemy się wyświetleniem wprowadzonych i sprawdzonych danych.

Tworzymy zmienną do której przypiszemy blok z dokumentu HTML i podmienimy jego zawartość za pomocą właściwości .innerHTML :

var dane = document.getElementById(“dane”).innerHTML = “Imię: ” + imie + “<br> Nazwisko: ” + nazwisko + “<br> Miejsce zamieszkania: ” +
msc + “<br> Płeć: ” + plec + “<br> Pesel: ” + pesel + “<br> Numer telefonu: ” + numer + “<br> Adres e-mail: ” + email;

Tekst wprowadzamy w cudzysłowiach łączony przy pomocy znaku + (zmienne bez cudzysłowii). W cudzysłowiach możemy także umieścić znaczniki html takie jak np. <br> w celu złamania wiersza przy wyświetlonych danych, żeby nie zostały one wyświetlone w jednej linii.

Efektem końcowym jest formularz z walidacją:

formjs

Plik do pobrania: walidacja

 

 

 

 

 

 

 

 

 

Dodaj komentarz