Email address validation check

It is possible to check if an email address is valid directly while the user is typing it in the field. It is not to check, if this email address is reachable, only if it can be valid (no unallowed characters, including an @-sign, a dot and a correct localization).For this you need JavaScript to check on every pressed key in the email field, if the until now typed email is valid. While it is unvalid, the field can be, for example, colored red, if it is correct and valid, the color changes to green.

To check the validation on every pressed key, you need a javaScript eventHandler in this text field. I use the ‚onkeyup‘ event for running the check after the next sign is entered.

<input id=“emailField“ name=“mail“ type=“text“ onkeyup=“echeck();“ />

On every single pressed key now the JavaScript function echeck() is called. This function colored the email field red, if the entered address is not valid, green if it is.

function echeck() {
  if(validateEmail(document.getElementById('emailField').value) == true) {
    document.getElementById('emailField').style.backgroundColor = 'green';
  } else {
    document.getElementById('emailField').style.backgroundColor = 'red';
  }
}

This small function calls then the real function to validate the email address. The called function is named validateEmail(value) and it gets the value of the text field as parameter and returns true or false.

function validateEmail(value) {
 // necassary signs for an email address
 var at="@";
 var dot=".";

 var indexOfAt=value.indexOf(at); // index of @ sign in the string
 var lengthOfAddress=value.length; // length of complete email string
 var indexOfDot=value.indexOf(dot); // index of the first dot in the string
 var lastdot=value.lastIndexOf(dot); // index of the last dot in the string

// return false if no @ is in string, on first or last position in the string
 if (value.indexOf(at)==-1 || value.indexOf(at)==0 || value.indexOf(at)==lengthOfAddress)
   return false

// return false, if no dot is in string, the dot is on first or last position or the substring after the dot returns an empty string
 if (value.indexOf(dot)==-1 || value.indexOf(dot)==0 || value.substring(lastdot+1)=="" || value.indexOf(dot)==lengthOfAddress)
   return false

// return false, if there are two @ signs in the string
 if (value.indexOf(at,(indexOfAt+1))!=-1)
   return false

// return false, if the sign before the @ is a dot or if the dot is the first or second sign after the @
 if (value.substring(indexOfAt-1,indexOfAt)==dot || value.substring(indexOfAt+1,indexOfAt+2)==dot)
   return false

// return false, if no dot comes after the @
 if (value.indexOf(dot,(indexOfAt+2))==-1)
   return false

// return false, if a whitespace is in the string
 if (value.indexOf(" ")!=-1)
   return false

// return false, if an in emails not allowed sign is in string
 if(notAllowedChars(value)==false)
   return false

// return false, if the length of substring after the last dot is less then 2
 if(value.substring(lastdot + 1).length < 2)
   return false

// return true, if nothing above returns false
 return true                   
}

For validating, if there is a not allowed sign in the email string, we need the small additional JavaScript function, that checks this behaviour. In the code above this function notAllowedChars(value) is called. This function is for this check.

function notAllowedChars(s) {
 var unallowedChars = '!#$^&*()+|}{[]?><~%:;/,=`"\''; 
 var charBefore="";
 for (var i = 0; i < s.length; i++) {  
   var c = s.charAt(i);
   if(i>0)charBefore=s.charAt(i-1)
     if (unallowedChars.indexOf(c) != -1 || (charBefore=="." && c=="."))
       return false;
 }
 return true;
}

If you have additional questions, please ask me.

 

Print Friendly, PDF & Email

Leave a Comment

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*
*