header

JavaScript - funkcja sprawdz_formularz() sprawdza, czy imię zostało napisane z wielkiej litery

imię:
email:
wpisz zapytanie:
 

A oto kod strony z powyższym formularzem:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
				 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Formularz obsługiwany przez skrypt php</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">

<style type="text/css">
input.blad {
  background-color: red;
  }
</style>

</head>
<body>

<script type="text/javascript" language="javascript">
    // Funkcja sprawdza, czy dane w formularzu są poprawne. W tym
	// przypadku, czy imię napisane jest wielką literą.
	// Jeżeli są poprawne, zwróci prawdę (true), jeżeli są błędy
	// zwróci fałsz (false). Dodatkowo funkcja wypisuje informacje
	// dla użytkownika.
    function sprawdz_formularz(formularz) {
	    // Sprawdź, czy imię zaczyna sie z wielkiej litery.
	    if (!formularz["imie"].value.match(/^[A-ZĆŁŃÓŹŻ]/)) {
			formularz["imie"].className = "blad"; // zakoloruje pole na czerwono
		    alert("Imie musi sie zaczynac z duzej litery.");
			return false;
	    } 
		else  // jezeli jest tutaj, to pole "imie" nie ma błędu - usuwamy klasę blad
			formularz["imie"].className = "";			
	    return true;
	}
  </script>

<form name="pytania" enctype="text/plain" method="post" action="wyslij.php"
	onsubmit="return sprawdz_formularz(this);">
<table border="0">
<tr>
<td width="132" valign="top">imię: </td>
<td width="439"><input name="imie" type="text" size="64" maxlength="80"></td>
</tr>
<tr>
<td valign="top">email: </td>
<td><input name="email" type="text" size="64" maxlength="80"></td>
</tr>
<tr>
<td valign="top">wpisz zapytanie: </td>
<td><textarea name="zapytanie" cols="60" rows="4"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input type="submit" name="wyslij" value="Wyślij"></td>
</tr>
</table>
</form>
</body>
</html>

W znaczniku <form> określamy reakcję na kliknięcie przycisku submit (stosujemy zdarzenie wbudowane onsubmit), umieszczonego w formularzu, reakcją jest wywołanie funkcji sprawdz_formularz(formularz).

<form name="pytania" enctype="text/plain" method="post" action="wyslij.php" onsubmit="return sprawdz_formularz(this);">

Formularzowi stworzonemu w HTML-u za pomocą znacznika <form> odpowiada obiekt form jęka javascript. Słowo kluczowe this oznacza ogólnie obiekt / zmienną, którą w tym momencie operujemy. Przez parametr this przekazujemy do funkcji wszystkie właściwości i metody związane z obiektem form. W celu "wyłuskania" łańcuchów znaków wpisanych w pola tekstowe piszemy nazwę odpowiadającą obiektowi this i w nawiasie kwadratowym nazwę pola tekstowego (atrybut name pola tekstowego formularza): formularz["imie"]. Wpisane imię uzyskujemy dodając po kropce metodę value: formularz["imie"].value. I w końcu dla porównania z odpowiednim wyrażeniam regularnym, stosujemy metodę match : formularz["imie"].value.match(/^[A-ZĆŁŃÓŹŻ]/). Otrzymujemy prawdę lub fałsz, w zależności, czy wpisany ciąg znaków zaczyna się z wielkiej litery od A do Z lub jednej z liter: ĆŁŃÓŹŻ. ^ przed nawiasem kwadratowym oznacza, że początek napisu musi być jednym ze znaków umieszczonych w tym nawiasie.

Jeżeli formularz["imie"].value.match(/^[A-ZĆŁŃÓŹŻ]/) zwróci wartość false, to wyrażenie !formularz["imie"].value.match(/^[A-ZĆŁŃÓŹŻ]/) będzie z prawdziwe (wykrzyknik oznacza logiczne "nieprawda, że"), wtedy zostanie wykonana metoda className="blad" . Ustawia ona wartość atrybutu class bieżącego elementu, w tym przypadku pola tekstowego "imie". Odpowiedni styl jest zdefiniowany w nagłówku strony:

<style type="text/css">
input.blad {
background-color: red;
}
</style>

Widzimy, że błędnie wypełnione pole zostanie zakolorowane na czerwono i dodatkowo wyskoczy komunikat: "Imie musi sie zaczynac z duzej litery." (alert("Imie musi sie zaczynac z duzej litery.")