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.

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.

The inputbox (HTML):

1.  
2. <input type = "email" id = "myinput" onKeyUp = "validateEmail(this)" />
3.  

The event handler (javascript):

1.  
2. var isValid = false;
3.  
4. validateEmail = function(e) {
5. 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)) {
6. if(!isValid) {
7. $(e).morph('border-color:#00FF00', {duration:.3});
8. isValid = true;
9. }
10. } else {
11. if(isValid) {
12. $(e).morph('border-color:#FF0000', {duration:.3});
13. isValid = false;
14. }
15. }
16. }
17.