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

x
?
Solved

Using Javascript to validate email address on shopping cart checkout form

Posted on 2008-11-10
21
Medium Priority
?
1,135 Views
Last Modified: 2013-11-18
I'm working with a Yahoo online store cart which currently requires that the user enter an email address.  Unfortunately, Yahoo provides zero validation for the email field.

Ideally, I would like to have two email input fields and then check to see if they are identical.  However, all the cart code is generated by the server and I have no way of doing this on the server side...  However, I AM able to add some custom Javascript and CSS to the page which may be of benefit.

I've posted a very simplified version of the cart html below...

Here's what I was thinking might be possible:

1. Define an additional email field and use Javascript and CSS to position it near the 'real' one
2. Use Javascript to check to see if the two values are the same
3. When the values are NOT identical, show a red warning mesage next to the field
4. User would never be prevented from proceeding... even if values are different

Is something like this possible with Javascript?

(I am a lot more experienced with the server-side stuff like php and mysql... but Javascript has always seemed a bit like voodoo to me!)

I'll split the points up between the most helpful answers, even if they are in a different direction than my idea above.
<html>
  <FORM name="CheckoutForm" method="post" action="yadayadayada">
    <INPUT type="text" class="text" name="various.other.address.fields" id="xyz">
    ...
    <INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email">
    ....
</FORM>
</html>

Open in new window

0
Comment
Question by:brianadkins
  • 11
  • 8
  • 2
21 Comments
 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22922880
sure this will be simple, let me write something up real quick.
0
 
LVL 82

Expert Comment

by:hielo
ID: 22922908
>>1. Define an additional email field and use Javascript and CSS to position it near the 'real' one
Why the additional field?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22923007
try:

<html>
<script>
function validate(f){
 var ok=true;
 
 if(f['real-email'].value == '' && f['billing-email'].value=='' )
 {
  document.getElementById('emailMsg').innerHTML="Email is a required field";
  ok=false;
 }
 else 
 if( f['real-email'].value != f['billing-email'].value ){
  document.getElementById('emailMsg').innerHTML="Email addresses do not match";
  ok=false;
 }
 else if( !/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(f['real-email'].value) )
 {
  document.getElementById('emailMsg').innerHTML="Invalid email address";
  ok=false;
 }
return ok;
}
</script>
  <FORM name="CheckoutForm" method="post" action="yadayadayada" onsubmit="return validate(this)">
    <INPUT type="text" class="text" name="various.other.address.fields" id="xyz">
    ... 
    <INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="real-email">
    <INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email"><span id="emailMsg" style="background-color:beige;border:3px double orange;"></span>
    ....
    <input type="submit"/>
</FORM>
</html>

Open in new window

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 15

Expert Comment

by:MMDeveloper
ID: 22923019
you may need to edit the validateForm() function to reference the actual ID's of the email fields but here is an untested solution. just call the validateForm() function on submit (or attach it as an onclick of the submit button). The function will auto-submit the form on success.

If either of the email fields are invalid, it will apply a red background color to it, give focus to the field, and select the text within it.
function isValidEmailAddr(str) {
 
	var at = "@";
	var dot = ".";
	var lat = str.indexOf(at);
	var lstr = str.length;
	var ldot = str.indexOf(dot);
	if (str.indexOf(at) == -1){
	   return false;
	}
 
	if (str.indexOf(at) == -1 || str.indexOf(at) == 0 || str.indexOf(at) == lstr){
	   return false;
	}
 
	if (str.indexOf(dot) == -1 || str.indexOf(dot) == 0 || str.indexOf(dot) == lstr){
	    return false;
	}
 
	 if (str.indexOf(at,(lat+1)) != -1){
	    return false;
	 }
 
	 if (str.substring(lat-1,lat) == dot || str.substring(lat+1,lat+2) == dot){
	    return false;
	 }
 
	 if (str.indexOf(dot,(lat+2)) == -1){
	    return false;
	 }
	
	 if (str.indexOf(" ") != -1){
	    return false;
	 }
 
	 return true;
}
 
function validateForm() {
	theForm = document.getElementsByName("CheckoutForm")[0];
	email1 = document.getElementById("billing-email"); //main email field
	email2 = document.getElementById("xyz"); //confirm email field
	
	if (isValidEmailAddr(email1.value)) {
		if (email2.value == email1.value) {
			//success
			theForm.submit();
		}
		else {
			//confirm email doesn't match valid main email field
			grabTBAttention(email2);
		}
	}
	else {
		//main field invalid email
		grabTBAttention(email1);
	}
}
 
function grabTBAttention(el) {
	try {
		el.style.backgroundColor = "#FF0000";
		el.focus();
		el.select();
	}
	catch(e) {
		//suppress error
	}
	return false;
}

Open in new window

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22923115
Good stuff so far....  I'll need some time to test them out, but here's some more info in the mean time:

1. I'm not really a fan of validating the format of email addresses to make sure the are *@*.* because most of the problems we see are the result of mis-spellings and not getting the format wrong.  An example would be customer types in abcdfe@aol.com instead of abcdef@aol.com  or maybe they even type abc@aol.cmo

2. Having two fields that must be identical is the best way to reduce mis-typing in my opinion (but feel free to set me straight !)
0
 
LVL 5

Author Comment

by:brianadkins
ID: 22923152
With respect to Hielo's response... that looks like what I was thinking... but unfortunately, I don't have the ability to add the extra input and span tags into the code.  I can only add a bit of code into either the header or the footer of the page.

Is there a way to write something that will generate those two tags which will position them on the page using CSS so that they appear next to the original email field?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22923209
>>I don't have the ability to add the extra input and span tags into the code.
OK, then is email field contained within it's own span or div?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22923285

<html>
<script>
function validate(f){
 var ok=true;
 
 if(!document.getElementById("emailMsg"))
 {
	f['real-email'].parentNode.innerHTML = f['real-email'].parentNode.innerHTML + '<span id="emailMsg" style="background-color:beige;border:3px double orange;">Email is a required field</span>'; 	
 }
 
 if(f['real-email'].value == '' && f['billing-email'].value=='' )
 {
  document.getElementById('emailMsg').innerHTML="Email is a required field";
  ok=false;
 }
 else if( f['real-email'].value != f['billing-email'].value ){
  document.getElementById('emailMsg').innerHTML="Email addresses do not match";
  ok=false;
 }
 else if( !/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(f['real-email'].value) )
 {
  document.getElementById('emailMsg').innerHTML="Invalid email address";
  ok=false;
 }
return ok;
}
</script>
  <FORM name="CheckoutForm" method="post" action="yadayadayada" onsubmit="return validate(this)">
    <INPUT type="text" class="text" name="various.other.address.fields" id="xyz">
    ...
 
    <div><INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="real-email"></div>
    <div><INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email"></div>
    ....
    <input type="submit"/>
</FORM>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22923295
yes!

I've pasted the DIV below which contains three inputs...  however, we are already using CSS to NOT display the second and third inputs (id's labelconfirm-email and labelratings.

... so, effectively, that DIV tag only contains one input field that ends up being displayed on the page.



<H4 class="ys_subSectionHeader" state="">Email Notification</H4> 
<DIV class="ys_subSection" id="ys_billingEmail" style=""> 
 
<FIELDSET> 
 
<LABEL for="billing-email" id="labelbilling-email" class="text"> 
<STRONG>Email Address:</STRONG> 
<INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email" size="40" maxlength="99" value=""> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixval" value="req,email"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixlabel" value="Email Address"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_secname" value="BillingEmail"> 
</LABEL> 
 
<LABEL for="confirm-email" id="labelconfirm-email" class="checkbox "> 
<INPUT type="hidden" id="miscDS.sendConfirmEmail_CKVAL" name="miscDS.sendConfirmEmail" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.sendConfirmEmail_CKBOX" id="confirm-email" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;0&#39;;}" checked="checked"> 
</LABEL> 
 
<LABEL for="ratings" id="labelratings" class="checkbox "> 
<INPUT type="hidden" id="miscDS.ratingsEnabled_CKVAL" name="miscDS.ratingsEnabled" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.ratingsEnabled_CKBOX" id="ratings" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;0&#39;;}"> 
<STRONG>Would you like Yahoo! to send you an email asking you to rate this merchant?</STRONG> 
</LABEL> 
 
</FIELDSET> 
 
</DIV> 

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22923803

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.eMsg{background-color:beige;border:3px double orange;}
-->
</style>
 
<script>
function validate(f){
 var ok=true;
 var eAddress=document.getElementById("billing-email");
 if(!document.getElementById("emailMsg"))
 {
 	var s = document.createElement("span");
	s.id="emailMsg";
	s.className="eMsg";
	eAddress.parentNode.insertBefore(s,eAddress.nextSibling)
 }
 
 if(eAddress.value == ''  )
 {
  document.getElementById('emailMsg').innerHTML="Email is a required field";
  ok=false;
 }
 /*
 else if( f['real-email'].value != f['billing-email'].value ){
  document.getElementById('emailMsg').innerHTML="Email addresses do not match";
  ok=false;
 }
 */
 else if( !/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(eAddress.value) )
 {
  document.getElementById('emailMsg').innerHTML="Invalid email address";
  ok=false;
 }
 else if( document.getElementById("confirm-email").checked===false) 
 {
  document.getElementById('emailMsg').innerHTML="You must confirm your email address.";
  ok=false;
 }
return ok;
}
</script>
</head>
<body>
<form onsubmit="return validate(this);">
<H4 class="ys_subSectionHeader" state="">Email Notification</H4> 
<DIV class="ys_subSection" id="ys_billingEmail" style=""> 
 
<FIELDSET> 
 
<LABEL for="billing-email" id="labelbilling-email" class="text"> 
<STRONG>Email Address:</STRONG> 
<INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email" size="40" maxlength="99" value=""> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixval" value="req,email"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixlabel" value="Email Address"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_secname" value="BillingEmail"> 
</LABEL> 
 
<LABEL for="confirm-email" id="labelconfirm-email" class="checkbox "> 
<INPUT type="hidden" id="miscDS.sendConfirmEmail_CKVAL" name="miscDS.sendConfirmEmail" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.sendConfirmEmail_CKBOX" id="confirm-email" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;0&#39;;}" checked="checked"> 
</LABEL> 
 
<LABEL for="ratings" id="labelratings" class="checkbox "> 
<INPUT type="hidden" id="miscDS.ratingsEnabled_CKVAL" name="miscDS.ratingsEnabled" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.ratingsEnabled_CKBOX" id="ratings" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;0&#39;;}"> 
<STRONG>Would you like Yahoo! to send you an email asking you to rate this merchant?</STRONG> 
</LABEL> 
 
</FIELDSET> 
 
</DIV> 
 
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22925031
Heilo,
Trying your latest solution, but only one email field shows when the page loads

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22925064
Also, to reduce confusion, I've re-pasted the html code below and omitted the two fields that we don't use (both are checkboxes) and that are not invloved in this scenario
<H4 class="ys_subSectionHeader" state="">Email Notification</H4> 
<DIV class="ys_subSection" id="ys_billingEmail" style=""> 
 
<FIELDSET> 
 
<LABEL for="billing-email" id="labelbilling-email" class="text"> 
<STRONG>Email Address:</STRONG> 
<INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email" size="40" maxlength="99" value=""> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixval" value="req,email"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixlabel" value="Email Address"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_secname" value="BillingEmail"> 
</LABEL> 
 
</FIELDSET> 
 
</DIV> 

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22925234
>>but only one email field shows when the page loads
Well what you pasted has only one email text field. I don't know what you are talking about. On the last code I posted I assumed that checking the checkbox was your way of "verifying" the email.
0
 
LVL 5

Author Comment

by:brianadkins
ID: 22925582
I wish we had the ability to add a second email field immediately after the first by changing something on the server, but we don't... the input fields are set in stone and we are only allowed to tweak them using javascript and CSS.

In other words, I am unable to directly change the contents of that DIV tag (id="ys_billingEmail").  All I am allowed to do is insert code at the very bottom or top of the page that modifies the contents of that DIV tag via javascript or CSS...

... I was hoping to make that a little more clear, but I may have failed miserably...
0
 
LVL 82

Expert Comment

by:hielo
ID: 22925753
>>I wish we had the ability to add a second email field immediately after the first by changing something on the server, but we don't...
OK, so you want to add that field dynamically as well?
0
 
LVL 82

Expert Comment

by:hielo
ID: 22925757
try:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.eMsg{background-color:beige;border:3px double orange;}
-->
</style>
 
<script>
window.onload=init;
function init()
{
 var eAddress=document.getElementById("billing-email");
 if(!document.getElementById("emailMsg"))
 {
 	var s = document.createElement("span");
	s.id="emailMsg";
	s.className="eMsg";
	eAddress.parentNode.insertBefore(s,eAddress.nextSibling);
	var d = document.createElement("div");
	d.innerHTML="<strong>Verify Email address: </strong><input type='text' name='vEmail' value='' id='vEmail' />";
	eAddress.parentNode.insertBefore(d,s.nextSibling);
 }
}
 
function validate(f){
 var ok=true;
 var eAddress=document.getElementById("billing-email");
 
 if(eAddress.value == ''  )
 {
  document.getElementById('emailMsg').innerHTML="Email is a required field";
  ok=false;
 }
 
 else if( eAddress.value != document.getElementById("vEmail").value.value ){
  document.getElementById('emailMsg').innerHTML="Email addresses do not match";
  ok=false;
 }
 
 else if( !/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(eAddress.value) )
 {
  document.getElementById('emailMsg').innerHTML="Invalid email address";
  ok=false;
 }
 
 else if( document.getElementById("confirm-email").checked===false) 
 {
  document.getElementById('emailMsg').innerHTML="You must confirm your email address.";
  ok=false;
 }
 
return ok;
}
</script>
</head>
<body>
<form onsubmit="return validate(this);">
<H4 class="ys_subSectionHeader" state="">Email Notification</H4> 
<DIV class="ys_subSection" id="ys_billingEmail" style=""> 
 
<FIELDSET> 
 
<LABEL for="billing-email" id="labelbilling-email" class="text"> 
<STRONG>Email Address:</STRONG> 
<INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email" size="40" maxlength="99" value=""> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixval" value="req,email"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixlabel" value="Email Address"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_secname" value="BillingEmail"> 
</LABEL> 
 
<LABEL for="confirm-email" id="labelconfirm-email" class="checkbox "> 
<INPUT type="hidden" id="miscDS.sendConfirmEmail_CKVAL" name="miscDS.sendConfirmEmail" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.sendConfirmEmail_CKBOX" id="confirm-email" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;0&#39;;}" checked="checked"> 
</LABEL> 
 
<LABEL for="ratings" id="labelratings" class="checkbox "> 
<INPUT type="hidden" id="miscDS.ratingsEnabled_CKVAL" name="miscDS.ratingsEnabled" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.ratingsEnabled_CKBOX" id="ratings" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;0&#39;;}"> 
<STRONG>Would you like Yahoo! to send you an email asking you to rate this merchant?</STRONG> 
</LABEL> 
 
</FIELDSET> 
 
</DIV> 
 
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Open in new window

0
 
LVL 82

Accepted Solution

by:
hielo earned 2000 total points
ID: 22925769
Oops. Get rid of the last else if clause in validate. I commented out on the attached code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
.eMsg{background-color:beige;border:3px double orange;}
-->
</style>
 
<script>
window.onload=init;
function init()
{
 var eAddress=document.getElementById("billing-email");
 if(!document.getElementById("emailMsg"))
 {
 	var s = document.createElement("span");
	s.id="emailMsg";
	s.className="eMsg";
	eAddress.parentNode.insertBefore(s,eAddress.nextSibling);
	var d = document.createElement("div");
	d.innerHTML="<strong>Verify Email address: </strong><input type='text' name='vEmail' value='' id='vEmail' />";
	eAddress.parentNode.insertBefore(d,s.nextSibling);
 }
}
 
function validate(f){
 var ok=true;
 var eAddress=document.getElementById("billing-email");
 
 if(eAddress.value == ''  )
 {
  document.getElementById('emailMsg').innerHTML="Email is a required field";
  ok=false;
 }
 
 else if( eAddress.value != document.getElementById("vEmail").value.value ){
  document.getElementById('emailMsg').innerHTML="Email addresses do not match";
  ok=false;
 }
 
 else if( !/\b[A-Z0-9._%-]+@[A-Z0-9.-]+\.[A-Z]{2,4}\b/i.test(eAddress.value) )
 {
  document.getElementById('emailMsg').innerHTML="Invalid email address";
  ok=false;
 }
 /*
 else if( document.getElementById("confirm-email").checked===false) 
 {
  document.getElementById('emailMsg').innerHTML="You must confirm your email address.";
  ok=false;
 }
 */
return ok;
}
</script>
</head>
<body>
<form onsubmit="return validate(this);">
<H4 class="ys_subSectionHeader" state="">Email Notification</H4> 
<DIV class="ys_subSection" id="ys_billingEmail" style=""> 
 
<FIELDSET> 
 
<LABEL for="billing-email" id="labelbilling-email" class="text"> 
<STRONG>Email Address:</STRONG> 
<INPUT type="text" class="text" name="miscDS.shopperEmailAddress" id="billing-email" size="40" maxlength="99" value=""> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixval" value="req,email"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_ymixlabel" value="Email Address"> 
<INPUT type="hidden" name="miscDS.shopperEmailAddress_secname" value="BillingEmail"> 
</LABEL> 
 
<LABEL for="confirm-email" id="labelconfirm-email" class="checkbox "> 
<INPUT type="hidden" id="miscDS.sendConfirmEmail_CKVAL" name="miscDS.sendConfirmEmail" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.sendConfirmEmail_CKBOX" id="confirm-email" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.sendConfirmEmail_CKVAL&#39;).value=&#39;0&#39;;}" checked="checked"> 
</LABEL> 
 
<LABEL for="ratings" id="labelratings" class="checkbox "> 
<INPUT type="hidden" id="miscDS.ratingsEnabled_CKVAL" name="miscDS.ratingsEnabled" value="1"> 
<INPUT type="checkbox" class="checkbox" name="miscDS.ratingsEnabled_CKBOX" id="ratings" value="1" onclick="javascript:if (this.checked) {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;1&#39;;} else {document.getElementById(&#39;miscDS.ratingsEnabled_CKVAL&#39;).value=&#39;0&#39;;}"> 
<STRONG>Would you like Yahoo! to send you an email asking you to rate this merchant?</STRONG> 
</LABEL> 
 
</FIELDSET> 
 
</DIV> 
 
<input type="submit" value="Submit"/>
</form>
</body>
</html>

Open in new window

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22925844
Bingo! ...  

Two last things....  

1. Can the fields be checked when the user 'leaves' the second field instead of when the for is submitted?

2. Also, Whenever I clicked in the second (dynamically generated) field, the focus immediately snapped back to the first field (had a hard time entering the email the second time)
0
 
LVL 82

Expert Comment

by:hielo
ID: 22925990
>> Can the fields be checked when the user 'leaves' the second field instead of when the for is submitted?
Then put an onchange event handler on the dynamic field (the verify email field) and call your function from there.

>>Whenever I clicked in the second (dynamically generated) field,
you mean whenever you clicked on the label (as opposed to the actual field). Try:
	d.innerHTML="<label for='vEmail' style='font-weight:bold;'>Verify Email address: </label><input type='text' name='vEmail' value='' id='vEmail' />";

Open in new window

0
 
LVL 5

Author Comment

by:brianadkins
ID: 22926073
Points are in the mail..... thanks!
0
 
LVL 82

Expert Comment

by:hielo
ID: 22926315
you are welcome
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

Question has a verified solution.

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

The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
Do online retailers and e-commerce sites even need to bother with the season? Is it lucrative to update and prepare your site for Black Friday and Cyber Monday shoppers? We'll find out now.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

580 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