Confirm email script

**bsaric** · 08-10-2006, 02:48 PM

Hi,

i need script that will compare to fields, if both emails are the same, if not give a warning to visitor.

Anything like that?

**mburt** · 08-10-2006, 03:06 PM

Code:

<html>
<head>
<script type="text/javascript">
function check(a,b) {
var obja = document.getElementById(a)
var objb = document.getElementById(b)
if (obja.value==objb.value) {}
else {alert("The e-mail fields aren't the same!!")}
}
</script>
</head>
<body>
<input id="input1">
<br><input id="input2">
<br><input type="button" onclick="check('input1','input2')" value="Validate">

**blm126** · 08-10-2006, 03:09 PM

It's a good idea to start with javascript for the users convenience, but remember javascript can easily be worked around and a server side backup should be in place.

**bsaric** · 08-10-2006, 04:10 PM

Thx, i will try. I usually don't use JS, i do this stuff with PHP, but form has around 20 input's, maybe is JS better solution then reloading page each time?

**mwinter** · 08-10-2006, 04:11 PM

Originally Posted by mburt

function check(a,b) {
var obja = document.getElementById(a)
var objb = document.getElementById(b)

As it is almost a certainty that the controls will be in a form for submission, it would be better to use the forms and elements collections. At the very least, the above should utilise feature detection.

HTML Code:

<form action="./somewhere" method="post" onsubmit="return validate(this);">
  <table>
    <!-- Other fields -->
    <tr>
      <td><label for="e-mail">E-mail address</label>:</td>
      <td><input id="e-mail" name="e-mail" value=""></td>
    </tr>
    <tr>
      <td><label for="confirm_e-mail">Confirm e-mail address</label>:</td>
      <td><input id="confirm_e-mail" name="confirm_e-mail" value=""></td>
    </tr>
    <!-- More fields -->
  </table>
</form>

Code:

function isEmailAddress(string) {
    return /^[^@]+@[^.]+(\.[^.]+)+$/.test(string);
}

function validate(form) {
    var controls = form.elements,
        emailAddress = controls['e-mail'].value;

    /* Validate other controls */

    if (!isEmailAddress(emailAddress)) {
        alert('Please enter your e-mail address.');
        return false;
    }
    if (emailAddress != controls['confirm_e-mail'].value) {
        alert('You may have mistyped your e-mail address.'
            + ' Please check both fields carefully and try again.');
        return false;
    }

    /* More validation */

    return true;
}

if (obja.value==objb.value) {}
else {alert("The e-mail fields aren't the same!!")}

Why the empty block statement?

Originally Posted by bsaric

I usually don't use JS, i do this stuff with PHP, but form has around 20 input's, maybe is JS better solution then reloading page each time?

Client-side code should not be considered sufficient on its own. As blm126 wrote, it can easily be sidestepped, and that allows a malicious user to submit whatever they wish. The point of using client-side code is to reduce round trips to the server and back, but it can never eliminate them entirely, and server-side validation is still essential.

Mike

**bsaric** · 08-10-2006, 07:04 PM

Ok, tnx for code & explanation.

**Snorkle?** · 08-12-2006, 04:43 AM

If you know regular expressions this will come in handy,
just dont forget your html tag too

<head>
<script language="Javascript" type="text/javascript">

</script>
</head>
<body bgcolor="#FFFFFF">
<h2 align="center">Email Validation</h2>
<form onSubmit="return submitIt(this)" action="someAction.cgi">
<table border="0" cellspacing="8" cellpadding="8">
<tr>
<td align="right" valign="top">
Email Address:
</td>
<td>
<input name="emailAddr" type="text" size="50" />
<p><input type="reset" /> <input type="submit" value="Submit" /></p>
</td>
</tr>
</table>
</form>
</body>
</html>

Sorry if it doesnt help u by the way

**mwinter** · 08-12-2006, 09:08 AM

Originally Posted by Snorkle?

The language attribute is deprecated and redundant.

<!-- hide script from old browsers

Those old browser, to which the comment above refers, haven't been used on the Web for a very long time. They are the likes of NN1 (no, that 1 is not a typo) and IE3. All browsers currently found on the Web understand what a script element is, even if they cannot execute client-side code.

re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\. \w{2,3})+$/

That regular expression is overly restrictive (and contains a typo). Though an e-mail address can be thoroughly syntax checked, there's little point: the only way to know if an address is valid is to send mail to it and recieve a reply (which is why various services send e-mails asking users to visit a randomly-generated link). The OP should use the regular expression I posted.

The bgcolor attribute is deprecated in favour of CSS. Moreover, setting only a foreground or background colour, without specifying all other colours (including the various link colours) is a bad idea. User preferences, including the use of desktop themes, can alter the default colours used by a browser. To assume particular values only invites colour clashes that can render a site unreadable.

<h2 align="center">Email Validation</h2>

Don't use headings to achieve a certain text size or style, and don't skip heading levels. Use the most semantically appropriate heading, and style it using CSS if it doesn't look right. The align attribute is also deprecated in favour of CSS.

Mike