Wrox Programmer Forums
|
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old November 23rd, 2004, 01:48 PM
Authorized User
 
Join Date: Jun 2003
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
Default Email verification

Hi:

I've got two text boxes on a registration page, one for an individual's email address and the second one for retyping the email address in an attempt to prevent a properly formatted but incorrect email address from being entered into our database.

The problem is this. If I use the 'onchange' in the Retype field to compare the values and it fails, I can't send focus back to the Retype field and allow the user to edit the current value and correct what is probably a minor error. If I want to send focus to other fields, I can. But it will not go back to the Retype field.

If I use the onblur event, then I can get the focus to return to the Retype field. However, if the error is actually in the Email field, then you are locked into the Retype field until you enter a value that matches the Email value, which is incorrect.

My process right now is to
1) use onchange
2) if it fails, blank out the Retype field and let focus go to the next control

Not ideal, but I haven't found a better way.

How do others handle this situation? In case it is helpful, the code I use is below.

Thanks,
JK


<script type="text/JavaScript">
function verifyEmailAddress()
{
if (document.register.email.value != document.register.verifyemail.value)
   {
   alert("The 'Retype Email' address does not match the 'Email' address.");
   document.register.verifyemail.value="";
   document.register.verifyemail.focus();
   }
}
</script>
 
Old November 23rd, 2004, 04:52 PM
Friend of Wrox
 
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

Why don't you just check the addresses when the form submits?

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!
 
Old November 23rd, 2004, 06:04 PM
Authorized User
 
Join Date: Jun 2003
Posts: 53
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hi Snib:

A couple of reasons:

1) There are already two checks that are run upon form submission, both of which were pulled from a web site somewhere (not by me) and I don't fully understand how they work
2) I haven't been able to get this third check and the others to play nice together
3) It just seems like it's an important enough thing to do that it should be emphasized as soon as possible and not wait until the last.
4) we're in a (surprise) pre-Thanksgiving fire drill mode

JK
 
Old November 23rd, 2004, 08:58 PM
Friend of Wrox
 
Join Date: Nov 2003
Posts: 1,285
Thanks: 0
Thanked 2 Times in 2 Posts
Default

If you really can't add this verification to the submit, I suggest doing it like this:

Create two small images, one red X and one green check-mark (or two images that symbolize acceptable and not acceptable). Put an <img> next to the verifyemail field. Write a JavaScript function which checks the fields for similarity onChange of the two input boxes. If they equal each other, change the <img> to the green check-mark image, and otherwise the red X image.

I have seen this technique used and thought it made verifying a form a lot easier, because you know before you submit it whether it will work.

Let me know how it goes,

-Snib
Where will you be in 100 years?
Try new FreshView 0.2!
 
Old November 24th, 2004, 03:59 AM
joefawcett's Avatar
Wrox Author
 
Join Date: Jun 2003
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

I've seen this problem before, I don't know why it happens, it's something to do with the timing. Try this:
Code:
<html>
<head>
<title>Check Email</title>
  <script type="text/JavaScript">
 function verifyEmailAddress()
 {
   if (document.register.email.value != document.register.verifyemail.value)
   {
   alert("The 'Retype Email' address does not match the 'Email' address.");
   document.register.verifyemail.value = "";        
   setTimeout("document.register.verifyemail.focus()", 10);
   }
   else
   {
     alert("OK");
   }
 }
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="register">
Email:<input type="text" name="email" size="30">
Verify Email:<input type="text" name="verifyemail" size="30" onchange="verifyEmailAddress();">
</form>
</body>
</html>
Personally I always copy and paste in this situation on forms so I'm not sure how useful your validation approach is.


--

Joe (Microsoft MVP - XML)





Similar Threads
Thread Thread Starter Forum Replies Last Post
Visual Verification System vinodhanandhan .NET Framework 1.x 0 December 10th, 2006 04:30 AM
login verification katie456 Access ASP 3 October 16th, 2005 01:47 PM
user login verification Ashleek007 PHP How-To 21 August 20th, 2004 10:49 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.