Walidacja adresu e-mail po stronie klienta

W artykule pt. walidacja adresu-mail, opisałem w jaki sposób można sprawdzić poprawność adresu skrzynki elektronicznej po stronie serwera w języku PHP. Niestety taki proces trochę trwa, bo przecież trzeba przesłać, stronę na serwer i poczekać na jego odpowiedź. Co więc zrobić, żeby internauta zaraz po opuszczeni danego pola dowiedział się czy podał poprawny adres e-mail?

I właśnie przy tym problemie z pomocą przychodzi nam działający po stronie klienta JavaScript. Należy jednak pamiętać, że dane przesyłane przez internautę, należy zawsze sprawdzać, po stronie serwera, nawet gdy robi to JavaScript po stronie klienta. Nigdy nie mamy przecież pewności czy osoba, która wypełnia formularz WWW na naszej witrynie, ma włączoną obsługę skryptów JavaScript, a jeżeli okaże się, że przeglądarka nie obsługuje tej technologi, to dane nie zostaną sprawdzone.

function validateEmail(idField, idHelpField) {
     //sprawdzamy czy pole zawiera jakieś dane
     if (!validateNonEmpty(idField, idHelpField))
          return false; //w danym polu nie podano danych
     //sprawdzamy czy podany ciąg znaków, jest adresem e-mali
     return validateRegEx(/^[a-zA-Z0-9][a-zA-Z0-9\._\-&!?#=]*@[\w-]+
          (\.\w{2,4})+$/, idField.value, idHelpText, "Proszę podać, poprawny adres e-mail.");
}

Do funkcji przekazujemy dane takie jak: idField – pole, w którym internauta podaje adres email (identyfikator id pola) oraz idHelpField – pole, w którym ma zostać wyświetlony komunikat o błedzie (identyfikator id pola).

Funkcję, deklarujemy w kodzie HTML, w ten sposób:

<input id="email" name="email" type="text" onblur="validateEmail(this, document.getElementById('email_error'))" />
<span id="email_error"></span>

Oczywiście należy również pamiętać, że funkcja JavaScirpt, też musi zostać podana w dokumencie.

JavaScript, Walidacja adresu e-mail po stronie klienta