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 opuszczeniu 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-mail
     return validateRegEx(/^[a-zA-Z0-9][a-zA-Z0-9\._\-&!?#=]*@[\w-]+(\.\w{2,4})+$/, idField.value, idHelpField, "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łędzie (identyfikator id pola).

Obie funkcje pomocnicze, z których korzysta powyższy przykład, deklarujemy następująco (walidacja niepustego pola oraz dopasowanie do wyrażenia regularnego z komunikatem o błędzie):

function validateNonEmpty(inputField, helpText) {
     //sprawdzamy czy pole nie jest puste
     if (inputField.value.length == 0) {
          if (helpText != null)
               helpText.innerHTML = "Proszę wypełnić to pole.";
          return false;
     }
     if (helpText != null)
          helpText.innerHTML = "";
     return true;
}

function validateRegEx(regex, inputStr, helpText, helpMessage) {
     //sprawdzamy czy ciąg znaków pasuje do wyrażenia regularnego
     if (!regex.test(inputStr)) {
          if (helpText != null)
               helpText.innerHTML = helpMessage;
          return false;
     }
     if (helpText != null)
          helpText.innerHTML = "";
     return true;
}

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 JavaScript też musi zostać podana w dokumencie.

Front-end, JavaScript, Tworzenie stron internetowych, wyrażenia regularne