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>

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!

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

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!

I've seen this problem before, I don't know why it happens, it's something to do with the timing. Try this:
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)