Realtime email validation with scriptaculous
October 18, 2007When adding this tiny javascript to the onkeyup event of your inputbox, the border will turn green when the email address. It uses scriptaculous' morph function to perform this transformation. See a demo
The inputbox (HTML):
<input type = "email" id = "myinput" onKeyUp = "validateEmail(this)" />
The event handler (javascript):
var isValid = false; validateEmail = function(e) { if(/^[a-zA-Z][w.-]*[a-zA-Z0-9]@[a-zA-Z0-9][w.-]*[a-zA-Z0-9].[a-zA-Z][a-zA-Z.]*[a-zA-Z]$/.test(e.value)) { if(!isValid) { $(e).morph('border-color:#00FF00', {duration:.3}); isValid = true; } } else { if(isValid) { $(e).morph('border-color:#FF0000', {duration:.3}); isValid = false; } } }Add to:
Demo seems to fail in IE6.
Comment by Rich — October 18, 2007 @ 3:44 pm
Hi Rich,
You’re right, I fixed it.
Thanks!
Comment by Willem — October 18, 2007 @ 6:04 pm
Excellent compact idea you have developed here. Seems like the underscore character is missing from the range in your ‘if’ statement. I see many people’s email addresses that include this character. Thought I might bring it to your attention.
Comment by Chris — February 6, 2008 @ 5:15 pm
Do an email address really need to start with a letter?
I remember those old compuserve address which started with a number …
e.g. 112523.3273@compuserve.com
Comment by JFSebastian — February 27, 2008 @ 11:57 am
Realtime email validation with scriptaculous…
When adding this tiny javascript to the onkeyup event of your inputbox, the border will turn green when the email address. It uses scriptaculous’ morph function to perform this transformation….
Trackback by Bookmarks.WittySparks.com — May 27, 2008 @ 4:40 pm