PDA

View Full Version : Email Address Validation Problem



ben1390
Nov 25th, 2009, 01:53 PM
Hi All,

I am trying to create a script for checking that checks that the email address entered into two input boxes is the same when a submit button is clicked, I have these two input boxes


<input type="text" name="user_email" id="user_email" />
<input type="text" name="user_email2" id="user_email2" />

This javascript code


<script type="text/javascript">
var email1 = document.getElementById(user_email);
var email2 = document.getElementById(user_email2);
function checkEmail(){
if (email1 != email2)
{
alert("The two email addresses are not the same");
}
}
</script>

and this code for the button


<input type="submit" name="submit" id="submit" onSubmit="checkEmail" />

However this code is not working, can anyone see where I am going wrong? Any help will be appreciated

Thanks in advance

Kor
Nov 25th, 2009, 02:20 PM
You should use the ids as strings. And, of course, you should compare the values of the elements, not the elements themselves. And you should call the validate function onsubmit, from the form element (not the submit button) to be able to stop, with a return false, the HTML action.


<script type="text/javascript">
function checkEmail(){
var email1 = document.getElementById('user_email').value;
var email2 = document.getElementById('user_email2').value;
if (email1 != email2){
alert("The two email addresses are not the same");
return false
}
}
</script>
...
<form action="" onsubmit="return checkEmail()">
<input type="text" name="user_email" id="user_email" />
<input type="text" name="user_email2" id="user_email2" />
<input type="submit" value="Submit" />
</form>

Philip M
Nov 25th, 2009, 02:35 PM
Several errors, I am afraid.

Compare this corrected version with your own:-



<form action="#" onsubmit="return checkEmail()">

<input type="text" name="user_email" id="user_email" />
<input type="text" name="user_email2" id="user_email2" />

<script type="text/javascript">
function checkEmail(){
var email1 = document.getElementById("user_email").value;
var email2 = document.getElementById("user_email2").value;
if ((email1 == "") || (email2 == "") || (email1 != email2)) {
alert("The two email addresses are blank or are not the same");
return false;
}
}
</script>

<input type="submit" value = "Submit This Form">

But all this does is checks that the two email addresses are not blank, and are the same. This is far from adequate - even a single space or a ? will pass the validation. The following provides proper validation:-




<form action="#" onsubmit="return checkEmail()">

<input type="text" name="user_email" id="user_email" />
<input type="text" name="user_email2" id="user_email2" />

<script type="text/javascript">
function checkEmail(){
var email1 = document.getElementById("user_email").value;
var email2 = document.getElementById("user_email2").value;
if (!(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i.test(email1))) {
alert ("Invalid email address - please re-enter");
document.getElementById("user_email").value = "";
document.getElementById("user_email2").value = "";
myfield = document.getElementById("user_email"); // overcomes bug in Firefox
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
if (email1 != email2) {
alert("The two email addresses are not the same - please re-enter them");
document.getElementById("user_email").value = "";
document.getElementById("user_email2").value = "";
myfield = document.getElementById("user_email");
setTimeout('myfield.focus();myfield.select();' , 10);
return false;
}
}
</script>

<input type="submit" value = "Submit This Form" >

As this is clearly a form, why are you using document.getElementById() rather than document.formname.fieldname.value?


BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the "Thank User For This Post" button.



He thought he saw an Elephant,
That practised on a fife:
He looked again, and found it was
A letter from his wife.
"At length I realise," he said,
"The bitterness of Life!"
- Lewis Carroll

ben1390
Nov 25th, 2009, 02:49 PM
Thank you for your help both of you, I have always used getElementById rather than document.formname.fieldname.value as this is what I have always known.

Also, I can assure you that I am not taking this help for granted, I was just being courteous