This validates a email field, combined with a simple input field as shown.
HTML
"<"input id="emailInput" class="halfSize" type="text" value="Place Replay to Email here" name="replyTo" onkeyup="validateEmail( this.value);" />
However it does it in a funky AJAX way, allowing the user to see where exactly they have put a foot wrong.
it checks the following
- Address is longer than 6 characters
- There is a @ symbol present
- and there is a "." within the domain section of the email
The 6 character mimumim was calculated using the following logic,
1 = one character for username
2 = one character for the @ symbol
3 = one character for the domain
4 = one dot/decimal to seperate the domain from the TLD
6 = two characters for TLD and ccTLD.
First improvement, that one should make, is enable both the input field, and result field to be supplied as function arguements, however in my case (internet computing assignments), this is only getting used once.
Javascript
function validateEmail( pEmailObj ){
var pEmailString;
var retVal;
var returnObj = "emailValidStatus";
var whereIsSymbol;
//Setup
pEmailString = pEmailObj;
document.getElementById(returnObj).style.background = "#bf3a3a";
document.getElementById(returnObj).style.color = "#fff";
document.getElementById(returnObj).style.padding = "2px";
//Go Down a level after each check
if(pEmailString.length > 6){ //Check length
if( (whereIsSymbol =pEmailString.search(/@/)) > -1){ //Check for @ symbol
//Find the dot after the @ Symbol
var lastDot = pEmailString.indexOf( ".", whereIsSymbol)
if(lastDot != -1){ //Check for . after @ symbol
document.getElementById( returnObj ).style.background = "#71ba43";
retVal = "Valid!";
}
else{
retVal = "Invalid: Bad Domain";
}
}
else{
retVal = "Invalid: Missing @ symbol";
}
}
else{
retVal = "Invalid: Too short";
}
document.getElementById( returnObj ).innerHTML = retVal;
}
Last but not least it's Released under the GPL, so use it and abuse it.
