Jump to content

Email address verification (onkeyup)

Guest FirefoxRocks

By Guest FirefoxRocks
in JavaScript

Recommended Posts

Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted

I am having some trouble with this verification script that I copied off of another site. The original javascript that the site gave was that anytime you submit the form and have a blank/invalid email address, there would be an alert box showing that.However, I didn't want to have an alert box showing up, so I decided to put a little notification (<span>) beside the text field instead. With my limited knowledge of JavaScript and HTML DOM, I decided to use the getElementById() to insert some content into the span. The problem is, it works fine if the email address is blank or invalid, but if the email is valid, then I want either the message to disappear, or some different text to show up. I can't get that to work.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><title>JavaScript - Email Address Verification</title><script type="text/javascript"><!--//--><![CDATA[//><!--function echeck(str) {		var at="@"		var dot="."		var lat=str.indexOf(at)		var lstr=str.length		var ldot=str.indexOf(dot)		if (str.indexOf(at)==-1){		   document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		}		if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){		   document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		}		if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){		    document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		}		 if (str.indexOf(at,(lat+1))!=-1){		    document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		 }		 if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){		    document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		 }		 if (str.indexOf(dot,(lat+2))==-1){		    document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		 }				 if (str.indexOf(" ")!=-1){		    document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";		 } 		 return true				}function ValidateForm(){	var emailID=document.getElementById('frmSample').txtEmail	if ((emailID.value==null)||(emailID.value=="")){		document.getElementById('alertEmail').innerHTML = "Please Enter your Email Address";		emailID.focus()	}	if (echeck(emailID.value)==false){		emailID.value=""		emailID.focus()	}	return true	document.getElementById('alertEmail').innerHTML = ""; }//--><!]]></script><style type="text/css"><!--/*--><![CDATA[/*><!--*/span#alertEmail {font-size:70%}/*]]>*/--></style></head><body><form id="frmSample" method="post" action=""><p>Enter an Email Address: <input type="text" name="txtEmail" onkeyup="ValidateForm()" /><input type="submit" name="Submit" value="Submit" /> <span id="alertEmail"></span></p></form></body></html>

Also, if I recall properly there is a way to access element content without using innerHTML, what is it?

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
Also, if I recall properly there is a way to access element content without using innerHTML
Not that I know of, anyway innerHTML is the most widespread.
function ValidateForm(){var emailID=document.getElementById('frmSample').txtEmailif ((emailID.value==null)||(emailID.value=="")){document.getElementById('alertEmail').innerHTML = "Please Enter your Email Address";emailID.focus();return true;}if (echeck(emailID.value)==false){emailID.value=""emailID.focus();return true;}document.getElementById('alertEmail').innerHTML = "";}

Try that.

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Oh right I get it. Change your echeck() function to look like this:

function echeck(str) {var at="@"var dot="."var lat=str.indexOf(at)var lstr=str.lengthvar ldot=str.indexOf(dot)if (str.indexOf(at)==-1 || str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr || str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr || str.indexOf(at,(lat+1))!=-1 || str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot || str.indexOf(dot,(lat+2))==-1) || str.indexOf(" ")!=-1) {document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";return false;} else { return true; }}

Now it will return false if the email address is incorrect. But why not just use regular expressions?

Link to comment
Share on other sites
Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted
Now it will return false if the email address is incorrect. But why not just use regular expressions?
I don't know what regular expressions is because I copied it off a site for JavaScript.After changing that function, nothing works.
Link to comment
Share on other sites
Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted
Regular expressions are used to parse strings and can be very powerful and fast. Check out this site for more info: http://www.regular-expressions.info/
I read some of it and didn't understand. What exactly is it in? JavaScript/PHP/ASP?And where do you put them for them to work? Is it parsed by some server software or the user agent?
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
:) oops syntax error - incorrect bracket.
function echeck(str) {var at="@"var dot="."var lat=str.indexOf(at)var lstr=str.lengthvar ldot=str.indexOf(dot)if (str.indexOf(at)==-1 || str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr || str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr || str.indexOf(at,(lat+1))!=-1 || str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot || str.indexOf(dot,(lat+2))==-1 || str.indexOf(" ")!=-1) {document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";return false;} else { return true; }}

Try now. Sorry :)

I read some of it and didn't understand. What exactly is it in? JavaScript/PHP/ASP?And where do you put them for them to work? Is it parsed by some server software or the user agent?
Regular expressions are semi - platform independent, like a formula, and are available in many languages, including PHP and JavaScript. In JavaScript, you can use the RegExp object to implement Regular Expressions.
Link to comment
Share on other sites
jesh Devoted Member

jesh

Posted
Posted

You might also check this page in the javascript reference:http://www.w3schools.com/jsref/jsref_replace.aspIt use uses regular expressions even though they don't mention that fact on the page. Everywhere where you see a string in forward slashes (e.g. /microsoft/), a regular expression is being used.I found that regular expressions had a steeper learning curve than any other technology that I've come across. Now that I understand them, though, I use them quite often.If you used the very basic (read, not all encompassing) regular expression displayed on the top of this page, you could match (some) email addresses:

var expression = /\b[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i;var emailaddress = "someone@somewhere.com";if(emailaddress.match(expression)){	alert("Looks OK");}else{	alert("Email address doesn't match format.");}

Link to comment
Share on other sites
Guest FirefoxRocks

Guest FirefoxRocks

Posted
Posted
:) oops syntax error - incorrect bracket.
function echeck(str) {var at="@"var dot="."var lat=str.indexOf(at)var lstr=str.lengthvar ldot=str.indexOf(dot)if (str.indexOf(at)==-1 || str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr || str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr || str.indexOf(at,(lat+1))!=-1 || str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot || str.indexOf(dot,(lat+2))==-1 || str.indexOf(" ")!=-1) {document.getElementById('alertEmail').innerHTML = "Invalid E-mail ID";return false;} else { return true; }}

Try now. Sorry :)Regular expressions are semi - platform independent, like a formula, and are available in many languages, including PHP and JavaScript. In JavaScript, you can use the RegExp object to implement Regular Expressions.

Thanks! That worked properly. Now I use onblur instead of onkeyup, because onkeyup will probably scare users :). For regular expressions, I may decide to investigate in them once I really need to use them.
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...