Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Email address check on Submit not working

Posted on 2012-08-28
5
Medium Priority
?
433 Views
Last Modified: 2012-08-29
Hello all experts.

Below is the code of a very simple one-field form that requires the email address.

It checks for two kinds of errors.

But, I cannot figure out why this does not work when I hit the Submit button.

Any help will be greatly appreciated.

--d.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<HEAD>
	<TITLE>title</TITLE>



	<script type="text/javascript" language="javascript">


function validEmail(Paddress) {
	var Vre;
		var Vret;
		Vre = /^[a-zA-Z0-9_\-\.]+@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,4}$/;
		Vret = Paddress.search(Vre);
		if(Vret == 0)
			{return true}
		else
			{return false}

}

function validate_email() {
			var all_ok = true;
			var err_msg = "";
			var fld = "";
			
	if (isblank(document.getElementById('email').value)) {
		all_ok = false;
		err_msg += "\n - Email cannot be left blank";
		fld='email';
	}else{
		if(!validEmail(document.getElementById('email').value)){
			all_ok = false;
			err_msg += "\n - Invalid Email Address";
			fld='email';
		}
	}
	
	
	if (all_ok == false){
		alert("The following errors have taken place - " + err_msg); 
		setFocus(fld);
	}
	return all_ok;    
}


String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }

	//-->
	</SCRIPT>

</HEAD>

<BODY onLoad="self.focus();document.front_form.email.focus()">


		<div id="center_div">


			<div id="front_mailing_list">

				<div class="wrapper">
				
			  	  <form name="front_form" action="http://www.google.com" onsubmit="return validate_email()" method="post">
  				  <input type="hidden" name="contact" value="yes">
					<p>Enter your e-mail address to receive our newsletter:</p>
					<span class="input"><input name="email" type="text" class="textbox" size="28" maxlength="75" title="email"/></span>&nbsp;<span class="input"><input type="submit" name="submit" class="submit" value="S u b s c r i b e  N o w" /></span>
			  	  </form>

	    		</div>  <!-- wrapper -->


			</div>  <!-- mailing_list -->

<div id="nothanks"><a href="http://google.com">No thanks, take me to the home page &gt;&gt;</a></div>

		</div> <!-- center_div -->

</BODY>
</HTML>

Open in new window

0
Comment
Question by:driven_13
  • 3
  • 2
5 Comments
 
LVL 8

Accepted Solution

by:
Ahmed Merghani earned 2000 total points
ID: 38344267
Hello,

There are a lot of mistakes here.
First, the "isblank" function is missing.
Second, the id "email" is missing.

Here is the code after modifications:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>
<HEAD>
	<TITLE>title</TITLE>



	<script type="text/javascript" language="javascript">


function validEmail(Paddress) {
	var Vre;
		var Vret;
		Vre = /^[a-zA-Z0-9_\-\.]+@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,4}$/;
		Vret = Paddress.search(Vre);
		if(Vret == 0)
			{return true}
		else
			{return false}

}

function isblank(str) {
	return (!str || 0 === str.length);
}


function validate_email() {
			
			var all_ok = true;
			var err_msg = "";
			var fld = "";

	if (isblank(document.getElementById('email').value)) {	
		all_ok = false;
		err_msg += "\n - Email cannot be left blank";
		fld='email';
	}else{
		if(!validEmail(document.getElementById('email').value)){		
			all_ok = false;
			err_msg += "\n - Invalid Email Address";
			fld='email';
		}
	}


	if (all_ok == false){	
		alert("The following errors have taken place - " + err_msg); 
		setFocus(fld);
	}
	return all_ok;    
}


String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }

	//-->
	</SCRIPT>

</HEAD>

<BODY onLoad="self.focus();document.front_form.email.focus()">


		<div id="center_div">


			<div id="front_mailing_list">

				<div class="wrapper">

				  <form name="front_form" action="http://www.google.com" onsubmit="return validate_email()" method="post">
				  <input type="hidden" name="contact" value="yes">
					<p>Enter your e-mail address to receive our newsletter:</p>
					<span class="input"><input id="email" name="email" type="text" class="textbox" size="28" maxlength="75" title="email"/></span>&nbsp;<span class="input"><input type="submit" name="submit" class="submit" value="S u b s c r i b e  N o w" /></span>
				  </form>

				</div>  <!-- wrapper -->


			</div>  <!-- mailing_list -->

<div id="nothanks"><a href="http://google.com">No thanks, take me to the home page &gt;&gt;</a></div>

		</div> <!-- center_div -->

</BODY>
</HTML>

Open in new window

0
 

Author Comment

by:driven_13
ID: 38344318
Ahhh, you indeed right sir.

Two questions:

1.)  Do I even need this function at the bottom:

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }

Open in new window


2.)  Even if there is an error in the email field and it pop's up with the right notification, as soon as I hit "OK" it takes me to google.com anyway.  How can I get it to stay on that page until the error is fixed....??  With the focus being in the textbox.

Thanx much.

--d.
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 38344374
1.) Leave it.
2.) Change the line:
setFocus(fld);

Open in new window

to
document.getElementById(fld).focus();

Open in new window

0
 

Author Comment

by:driven_13
ID: 38344436
Thanx for your help.

--d.
0
 
LVL 8

Expert Comment

by:Ahmed Merghani
ID: 38344457
You are welcome
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
This holiday season, we’re giving away the gift of knowledge—tech knowledge, that is. Keep reading to see what hacks, tips, and trends we have wrapped and waiting for you under the tree.
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question