How to Verify / Notify for Duplicate email addresses

anjo

2007-12-15 11:46

When requesting an important bit of information, such as an email address , you might want the user to enter the information twice so you can verify that a typing error did not occur.

Instead of waiting for the user to submit the form, why not notify the user when the emails match (and more importantly, when they don't match)?

I have only tested this briefly but it works thus far so back up your files!!!

1. we need to create a new email field I called mine Email2

in orders_delivery.tpl add Email2 field

$lang[Email]:
</th>
<td>
<input type="text" name="sEmail" value="$aData[sEmail]" class="input" maxlength="40" onblur="saveUserData( this.name, this.value )"onKeyUp="verify.check()" />
</td>
</tr>
<th>

// email2 start
$lang[Email2]:
th>
<td>
<input type="text" name="sEmail2" value="$aData[sEmail2]" class="input" maxlength="40" onblur="saveUserData( this.name, this.value )" onKeyUp="verify.check()"/>
</td>
</tr>
<tr>
// email2 end

<td colspan="3">

2. in the same page orders_delivery.tpl we need to call the verifynotify.js script for verification which we will create later. copy and paste email2 js script code and while you are up there add new array for email2 so that customer has to type email address

,Array( 'sEmail2' )

<!-- BEGIN FORM -->
<script type="text/javascript" src="$config[dir_js]checkForm.js"></script>
<script type="text/javascript" src="$config[dir_js]orders.js"></script>

// email2 js script start
<SCRIPT TYPE="text/javascript" src="$config[dir_js]verifynotify.js"></SCRIPT>
// email2 js script end

<script type="text/javascript" >
<!--

3. Still on the same page orders_delivery.tpl we need to give the form a name, add
form name="email_form" at the begining of the form

,Array( 'iCourier', 'simple', '$lang[Choose_courier]' )
);
}
//-->
</script>
<form action="?p=$p" method="post" onsubmit="return checkForm( this, aCheckFormDelivery );" id="order">

so that the last line looks like:

<form name="email_form" form action="?p=$p" method="post" onsubmit="return checkForm( this, aCheckFormDelivery );" id="order">

4. still on same page orders_delivery.tpl we need to create text result so that customer gets a message when emails matched . look for this line

<td colspan="3">
<h4>$lang[Payment_and_shipping]</h4>

and just below coldspan add div and script so it looks like

<td colspan="3">

// copy and paste this code

<DIV ID="email_result">&nbsp;</DIV>
<SCRIPT TYPE="text/javascript">
<!--
verify = new verifynotify();
verify.field1 = document.email_form.sEmail;
verify.field2 = document.email_form.sEmail2;
verify.result_id = "email_result";
verify.match_html = "<SPAN STYLE=\"color:blue\">Thank you, your email address matches!<\/SPAN>";
verify.nomatch_html = "<SPAN STYLE=\"color:red\">Your email address needs to match!<\/SPAN>";
// Update the result message
verify.check();

// -->
</SCRIPT>

// end of copy and paste code

<h4>$lang[Payment_and_shipping]</h4>

5. OK thats all for this page. now we need to create verifynotify.js file.
open notepad and copy and paste this script:

/*==================================================*
$Id: verifynotify.js,v 1.1 2003/09/18 02:48:36 pat Exp $
Copyright 2003 Patrick Fitzgerald
http://www.barelyfitz.com/webdesign/articles/verify-notify/

This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program; if not, write to the Free Software
Foundation, Inc., 59 Temple Place, Suite 330, Boston, MA 02111-1307 USA
*==================================================*/

function verifynotify(field1, field2, result_id, match_html, nomatch_html) {
this.field1 = field1;
this.field2 = field2;
this.result_id = result_id;
this.match_html = match_html;
this.nomatch_html = nomatch_html;

this.check = function() {

// Make sure we don't cause an error
// for browsers that do not support getElementById
if (!this.result_id) { return false; }
if (!document.getElementById){ return false; }
r = document.getElementById(this.result_id);
if (!r){ return false; }

if (this.field1.value != "" && this.field1.value == this.field2.value) {
r.innerHTML = this.match_html;
} else {
r.innerHTML = this.nomatch_html;
}
}
}

6. save this file with the name- verifynotify.js - into the quick cart js folder

7.open lang/eng.php file and next to other email lang code add

$lang['Email2'] = 'Retype Email';

Thats it. It should work with only these modifications. If you check your form it should have in red text= " Your email address needs to match!." when the customer types correct addresses a blue message shows "Thank you, your email address matches!"

However if you want to pass varible Email 2
then add Email2 code to core/orders.php near line 33 you find

if( isset( $aList ) && is_array( $aList ) ){
list( , $aList['iTime'], $aList['iCourier'], $aList['sCourier'], $aList['fCourierPrice'], $aList['sFirstName']........etc.....

just add $aList['sEmail2'], after $aList['sEmail'],

9. same file core/orders.php near line 188 add

$aForm['sEmail2'],

10. Now you can add a new email2 input in admin/orders_details.php so that you can see customers typed both emails correctly.

» Quick.Cart v2.x

anjo

2007-12-15 12:09

Oh by the way, I have a fully customised Order details page for the uk. with drop down list for country, counties, accept terms and conditions tick box before submit, optional telephone with area code box.