Form Validation

[lil_john]

Hello,
To simplify my problem, let's say I have two text boxes given the id names 'email' and 'email_confirm.' I have a green check image and a red x image next to the 'email_confirm' text box. The images are in the same location and are both currently invisible. I want to make it so as I type in the text box 'email_confirm' it checks to see if it is the same value as the text box 'email' and either the green check or red x appear visible.

I first thought about doing this in javascript with the following code:

[CODE]
<script type="text/javascript">

if((document.getElementById('reg_email').value) == (document.getElementById('reg_email_confirm').value))
{
document.getElementById('check').style.visibility = 'visible';
}
else
{
document.getElementById('red_x').style.visibility = 'visible';
}
</script>
[CODE]

However, you have to refresh the page to get the image to appear. I want it to be dynamic and constantly change according to the current text box input. I feel like I can do this somehow with dhtml, or maybe I have to use an asp script? Either way, I don't really know where to go from here.

[Nile]

Try:

<script type="text/javascript">
document.getElementById('reg_email_confirm').onkeyup = function(){
if(document.getElementById('reg_email').value == document.getElementById('reg_email_confirm').value)
{
document.getElementById('check').style.visibility = 'visible';
}
else
{
document.getElementById('red_x').style.visibility = 'visible';
}
}
</script>

Put this under both input boxes.

[lil_john]

Thanks for your reply!
This code works to an extent, but doesn't cover everything. For example, lets say the first text box contains the string 'abc'
If I type 'abc' in the second text box, the check mark appears as desired. However, when I continue and type 'd' (appending to the abc in the second text box) the red x does not take it's place. Also, hitting the backspace button doesn't seem to play into any of the logic either.

[Nile]

This should do it:

<script type="text/javascript">
var testEmail = function(){
if(document.getElementById('reg_email').value == document.getElementById('reg_email_confirm').value)
{
document.getElementById('check').style.visibility = 'visible';
document.getElementById('red_x').style.visibility = 'hidden';
}
else
{
document.getElementById('red_x').style.visibility = 'visible';
document.getElementById('check').style.visibility = 'hidden';
}
}
document.getElementById('reg_email_confirm').onkeyup = testEmail;
document.getElementById('reg_email').onkeyup = testEmail;
</script>

[Nile]

I'm glad to help.

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"