Sprawdzenie poprawności formularza
Skrypt ma praktyczne wykorzystanie przy wypełnianiu formularza - sprawdza, czy odpowiednie pola zostały wypełnine oraz czy adres e-mail został poprawnie wpisany.
<script language="JavaScript" type="text/javascript"> <!-- Hide it function validate_form() { validity = true; if (!check_empty(document.form.realname.value)) { validity = false; alert('Brakuje imienia i nazwiska...'); } if (!check_empty(document.form.subject.value)) { validity = false; alert('Brakuje tematu listu'); } if (!check_email(document.form.email.value)) { validity = false; alert('Podany adres e-mail nie jest poprawny'); } return validity; } function check_empty(text) { return (text.length > 0); } function check_email(address) { if ((address == "") || (address.indexOf ('@') == -1) || (address.indexOf ('.') == -1)) return false; return true; } // --> </script> |
Powyższy kod powinien znaleźć się w sekcji <HEAD> dokumentu.
if (!check_empty(document.form.realname.value)) { validity = false; alert('Brakuje imienia i nazwiska...'); } |
Ta linijka jest odpowiedzialna za sprawdzenie, czy pole realname (imię/nazwisko) nie jest puste - odpowiada za to funkcja !check_empty. Jeśli chcesz też sprawdzić, czy np. pole subject (Temat listu) nie jest puste, dorzucasz następną linijkę odpowiednio modyfikując nazwę pola i komentarz:
if (!check_empty(document.form.subject.value)) { validity = false; alert('nie wpisałeś tematu listu!'); } |
Należy pamiętać, że nazwy pól są definiowane w formularzu przez parametr name="nazwapola" i muszą się zgadzać z tymi podanymi w kodzie JavaScriptu, np:
<input name="realname" type="text " size="30" maxlength="80"> |
Oddzielną sprawą jest sprawdzenie poprawności wpisania adresu e-mail, który musi posiadać znak "@" i przynajmniej kilka liter. Korzystamy więc z funkcji !check_email:
if (!check_email(document.form.email.value)) { validity = false; alert('Podany adres e-mail nie jest poprawny'); } |
Należy jeszcze odpowiednio zmodyfikować definicję formularza:
<form action="/cgi-bin/formmail.pl" method="post" name="form" onSubmit="return validate_form()"> |