[SOLVED] My incomplete attempt to add a "Confirm Email" field

Quote

Post by paola_84 » Sat Apr 26, 2025 9:46 pm

Hello, I'm trying to add a "Confirm Email" field wherever the user has to enter an email address. I'm using the default theme and version 3.0.3.8.
So far I've been able to do it in account/register by copying the parts related to the password confirmation and modifying them to match the email field (I've put the code below). It works.

However, I can't get it to work in checkout/register: things seem to work differently there, there aren't the same parts of code as in account/register and if I copy and edit the only piece of code related to password confirmation, it doesn't work.
Also I don't know how to do it in checkout/guest, account/edit and account/voucher because there is no "Password" field there, so there is nothing to copy and edit.
Is there anyone who can help me?

Here's the code I used for account/register:

In template/account/register.twig I added:

Code: Select all

<div class="form-group required">
	<label class="col-sm-3 control-label" for="input-email-confirm">{{ entry_email_confirm }}</label>
	<div class="col-sm-9">
		<input type="email" name="emailconfirm" value="{{ emailconfirm }}" placeholder="{{ entry_email_confirm }}" id="input-email-confirm" class="form-control" />
        {% if error_email_confirm %}
        <div class="text-danger">{{ error_email_confirm }}</div>
        {% endif %} </div>
</div>
In controller/account/register.php I added:

Code: Select all

if (isset($this->error['emailconfirm'])) {
	$data['error_email_confirm'] = $this->error['emailconfirm'];
	} else {
	$data['error_email_confirm'] = '';
}

Code: Select all

if (isset($this->request->post['emailconfirm'])) {
	$data['emailconfirm'] = $this->request->post['emailconfirm'];
	} else {
	$data['emailconfirm'] = '';
}

Code: Select all

if ($this->request->post['emailconfirm'] != $this->request->post['email']) {
	$this->error['emailconfirm'] = $this->language->get('error_email_confirm');
}
In language/en-gb/account/register.php I added:

Code: Select all

$_['entry_email_confirm']  = 'Confirm E-Mail';
$_['error_email_confirm']  = 'Confirm E-Mail does not match E-Mail!';

Attachments

???
confirm-email.jpg
Confirm e-mail field
Last edited by paola_84 on Tue Apr 29, 2025 9:31 pm, edited 1 time in total.
paola_84
Newbie
Posts
4
Joined
Fri Mar 21, 2025 2:39 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by Joe1234 » Mon Apr 28, 2025 3:48 am

I don't have an answer to your code, but I have a suggested route. Why not do this through javascript? Either put the javascript on each of the pages that has the form, or put the javascript in the footer and based on the page/route that is currently active, the javascript kicks in to do the email confirmation. I think that would be easiest to adapt to all forms where it's needed.

v3.0.4.0 php 8.1
I'm here for a reason, if your response is contact a/the developer, just don't reply.

Joe1234
Active Member
Posts
637
Joined
Sat Jan 01, 2022 5:47 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by paola_84 » Mon Apr 28, 2025 4:02 am

Thanks for the suggestion, the problem is that I only know HTML and CSS and a little bit of PHP but I never learned Javascript so I wouldn't even know where to start :(
paola_84
Newbie
Posts
4
Joined
Fri Mar 21, 2025 2:39 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by Joe1234 » Mon Apr 28, 2025 8:21 am

This is untested, but should give you a guide. Put the script portion in the footer. Two different ways you can do it, or combine them. In the twig.

Code: Select all

<div class="form-group">
    <label for="input-email">Email</label>
    <input type="email" name="email" id="primary_email" class="form-control" required />
</div>
<div class="form-group">
    <div id="email_match_indicator" style="margin-bottom: 8px; font-weight: bold;"></div> <!-- Indicator -->
    <label for="input-confirm-email">Confirm Email</label>
    <input type="email" id="confirm_email" class="form-control" required />
</div>
Real time check:

Code: Select all

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Check if the URL contains `route=account/register`, add OR statement to add other URL that you want to do email confirms
    if (window.location.search.includes("route=account/register")) {
        const primaryEmailInput = document.getElementById("primary_email");
        const confirmEmailInput = document.getElementById("confirm_email");

        // Ensure the fields exist before adding event listeners
        if (primaryEmailInput && confirmEmailInput) {
            const indicator = document.getElementById("email_match_indicator");

            primaryEmailInput.addEventListener("keyup", checkEmailMatch);
            confirmEmailInput.addEventListener("keyup", checkEmailMatch);

            function checkEmailMatch() {
                const primaryEmail = primaryEmailInput.value;
                const confirmEmail = confirmEmailInput.value;

                if (primaryEmail === "" || confirmEmail === "") {
                    indicator.textContent = ""; // Clear message when fields are empty
                } else if (primaryEmail === confirmEmail) {
                    indicator.textContent = "✅ Email addresses match";
                    indicator.style.color = "green";
                } else {
                    indicator.textContent = "❌ Email addresses do not match";
                    indicator.style.color = "red";
                }
            }
        }
    }
});
</script>
On submit check

Code: Select all

<script>
document.querySelector("form").addEventListener("submit", function(event) {
    const primaryEmail = document.getElementById("primary_email").value;
    const confirmEmail = document.getElementById("confirm_email").value;
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

    if (!emailRegex.test(primaryEmail) || !emailRegex.test(confirmEmail)) {
        alert("Please enter a valid email address.");
        event.preventDefault(); // Prevent form submission
        return;
    }

    if (primaryEmail !== confirmEmail) {
        alert("Email addresses do not match.");
        event.preventDefault(); // Prevent form submission
    }
});
</script>
...probably should put a check to make sure you're on a form page for the on submit check as well.

v3.0.4.0 php 8.1
I'm here for a reason, if your response is contact a/the developer, just don't reply.

Joe1234
Active Member
Posts
637
Joined
Sat Jan 01, 2022 5:47 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by grgr » Mon Apr 28, 2025 9:56 pm

Alternatively, here is some OCMOD code that does the account/register and the checkout/guest. You can extend this to checkout register in the same way checkout/guest is shown here.

Code: Select all

<modification>
	<name>Confirm Email</name>
	<code>vger_ce</code>
	<version>1.0</version>
	<author>grgr - admin@vger.co.uk</author>	
	
	<file path="catalog/language/*/account/register.php">
        <operation>
            <search><![CDATA[
$_['text_account'] 
            ]]></search>
            <add position="before"><![CDATA[
$_['entry_email_confirm']  = 'Confirm E-Mail';
$_['error_email_confirm']  = 'Confirm E-Mail does not match E-Mail!';
            ]]></add>
        </operation>
	</file>
  
  	<file path="catalog/language/*/checkout/checkout.php">
        <operation>
            <search><![CDATA[
$_['entry_email_address']
            ]]></search>
            <add position="before"><![CDATA[
$_['entry_email_confirm']  = 'Confirm E-Mail';
$_['error_email_confirm']  = 'Confirm E-Mail does not match E-Mail!';
            ]]></add>
        </operation>
	</file>


	<file path="catalog/controller/account/register.php">
        <operation>
            <search><![CDATA[
if (isset($this->error['confirm'])) {
            ]]></search>
            <add position="before"><![CDATA[
			if (isset($this->error['emailconfirm'])) {
				$data['error_email_confirm'] = $this->error['emailconfirm'];
			} else {
				$data['error_email_confirm'] = '';
			}
            ]]></add>
        </operation>
        <operation>
            <search><![CDATA[
if (isset($this->request->post['confirm'])) {
            ]]></search>
            <add position="before"><![CDATA[
			if (isset($this->request->post['emailconfirm'])) {
				$data['emailconfirm'] = $this->request->post['emailconfirm'];
			} else {
				$data['emailconfirm'] = '';
			}
            ]]></add>
        </operation>
        <operation>
            <search><![CDATA[
if ($this->request->post['confirm']
            ]]></search>
            <add position="before"><![CDATA[
		if ($this->request->post['email'] != $this->request->post['emailconfirm']) {
			$this->error['emailconfirm'] = $this->language->get('error_email_confirm');
		}
            ]]></add>
        </operation>	  
	</file>
  
  	<file path="catalog/view/theme/*/template/account/register.twig">
        <operation>
            <search><![CDATA[
<label class="col-sm-2 control-label" for="input-telephone">{{ entry_telephone }}</label>
            ]]></search>
            <add position="replace"><![CDATA[
			<label class="col-sm-3 control-label" for="input-emailconfirm">{{ entry_email_confirm }}</label>
			<div class="col-sm-9">
			  <input type="email" name="emailconfirm" value="{{ emailconfirm }}" placeholder="{{ entry_email_confirm }}" id="input-emailconfirm" class="form-control" />
			  {% if error_email_confirm %}
				<div class="text-danger">{{ error_email_confirm }}</div>
			  {% endif %} </div>
			</div>
		  <div class="form-group required">
            <label class="col-sm-2 control-label" for="input-telephone">{{ entry_telephone }}</label>
            ]]></add>
        </operation>
	</file>
  
<!-- CHECKOUT/GUEST -->
	<file path="catalog/controller/checkout/guest.php">
        <operation>
            <search><![CDATA[
if ((utf8_strlen($this->request->post['email']) > 96)
            ]]></search>
            <add position="before"><![CDATA[
		if ($this->request->post['email'] != $this->request->post['emailconfirm']) {
				$json['error']['emailconfirm'] = $this->language->get('error_email_confirm');
		}
            ]]></add>
        </operation>
	</file> 
  	<file path="catalog/view/theme/*/template/checkout/guest.twig">
        <operation>
            <search><![CDATA[
<label class="control-label" for="input-payment-telephone">{{ entry_telephone }}</label>
            ]]></search>
            <add position="replace"><![CDATA[
			<label class="control-label" for="input-payment-emailconfirm">{{ entry_email_confirm }}</label>
			
			  <input type="text" name="emailconfirm" value="" placeholder="{{ entry_email_confirm }}" id="input-payment-emailconfirm" class="form-control" />

		  </div>
		  <div class="form-group required">
            <label class="control-label" for="input-payment-telephone">{{ entry_telephone }}</label>
            ]]></add>
        </operation>
	</file>  
</modification>

-
Image Image Image
VIEW ALL EXTENSIONS * EXTENSION SUPPORT * WEBSITE * CUSTOM REQUESTS

User avatar
grgr
Active Member
Posts
1619
Joined
Mon Mar 28, 2011 4:08 pm
Location - UK
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by paulfeakins » Mon Apr 28, 2025 10:24 pm

paola_84 wrote: ↑
Sat Apr 26, 2025 9:46 pm
 Hello, I'm trying to add a "Confirm Email" field wherever the user has to enter an email address.
My advice is don't do it.

People get annoyed by this and they just copy and paste.

If you really want to verify someone has put in the correct email address, you should send them a test email with a verification code.

There may be extensions that do that.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk

User avatar
paulfeakins
Legendary Member
Online
Posts
10008
Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by paola_84 » Tue Apr 29, 2025 2:36 am

Thank you both so so much!

@Joe1234: I tested the solution proposed by @grgr first because I could understand it better but I really hope that yours will be useful also to others who maybe prefer to use Javascript. Thank you so much for taking the time to solve my problem!

@grgr: thanks, it works perfectly! You should definitely complete it and publish it as an extension! You need to change "col-sm-3" and "col-sm-9" to "col-sm-2" and "col-sm-10", because the first ones are changes I made to my theme but the default theme has the second ones (I forgot to put them back before publishing this post).

I also managed to get it to work in checkout/register by duplicating your code for checkout/guest as you suggested and also in account/edit using the code for account/register.

I also managed to get it to work in account/voucher! Here is the code I used:

In voucher.twig

Code: Select all

<div class="form-group required">
		<label class="col-sm-2 control-label" for="input-emailtoconfirm">{{ entry_to_email_confirm }}</label>
			<div class="col-sm-10">
			  <input type="email" name="emailtoconfirm" value="{{ emailtoconfirm }}" placeholder="{{ entry_email_to_confirm }}" id="input-emailtoconfirm" class="form-control" />
			  {% if error_email_to_confirm %}
				<div class="text-danger">{{ error_email_to_confirm }}</div>
			  {% endif %} 
			 </div>
		 </div>

Code: Select all

<div class="form-group required">
		<label class="col-sm-3 control-label" for="input-emailfromconfirm">{{ entry_from_email_confirm }}</label>
			<div class="col-sm-9">
			  <input type="email" name="emailfromconfirm" value="{{ emailfromconfirm }}" placeholder="{{ entry_email_from_confirm }}" id="input-emailfromconfirm" class="form-control" />
			  {% if error_email_to_confirm %}
				<div class="text-danger">{{ error_email_from_confirm }}</div>
			  {% endif %} 
			 </div>
		 </div>
In controller/account/voucher.php

Code: Select all

if (isset($this->error['emailtoconfirm'])) {
				$data['error_email_to_confirm'] = $this->error['emailtoconfirm'];
			} else {
				$data['error_email_to_confirm'] = '';
			}
if (isset($this->error['emailfromconfirm'])) {
				$data['error_email_from_confirm'] = $this->error['emailfromconfirm'];
			} else {
				$data['error_email_from_confirm'] = '';
			}

Code: Select all

if (isset($this->request->post['emailtoconfirm'])) {
				$data['emailtoconfirm'] = $this->request->post['emailtoconfirm'];
			} else {
				$data['emailtoconfirm'] = '';
			}
if (isset($this->request->post['emailfromconfirm'])) {
				$data['emailfromconfirm'] = $this->request->post['emailfromconfirm'];
			} else {
				$data['emailfromconfirm'] = '';
			}

Code: Select all

if ($this->request->post['to_email'] != $this->request->post['emailtoconfirm']) {
			$this->error['emailtoconfirm'] = $this->language->get('error_email_to_confirm');
		}
if ($this->request->post['from_email'] != $this->request->post['emailfromconfirm']) {
			$this->error['emailfromconfirm'] = $this->language->get('error_email_from_confirm');
		}
In language/*/account/voucher.php

Code: Select all

$_['entry_to_email_confirm']   = 'Confirm Recipient\'s E-mail';
$_['entry_from_email_confirm'] = 'Confirm Your E-mail';
$_['error_email_from_confirm']   = 'Confirm E-Mail does not match Your E-Mail!';
$_['error_email_to_confirm']   = 'Confirm E-Mail does not match Recipient\'s E-mail!';
Feel free to use this code if you want to create the extension. To make it really complete there would also be affiliate/register but I don't use it so for me it isn't necessary
Last edited by paola_84 on Tue Apr 29, 2025 2:53 am, edited 2 times in total.
paola_84
Newbie
Posts
4
Joined
Fri Mar 21, 2025 2:39 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by Joe1234 » Tue Apr 29, 2025 6:18 am

paulfeakins wrote: ↑
Mon Apr 28, 2025 10:24 pm
 People get annoyed by this
Agreed
paulfeakins wrote: ↑
Mon Apr 28, 2025 10:24 pm
 they just copy and paste.
A few more lines of code can prevent that

v3.0.4.0 php 8.1
I'm here for a reason, if your response is contact a/the developer, just don't reply.

Joe1234
Active Member
Posts
637
Joined
Sat Jan 01, 2022 5:47 am
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by paulfeakins » Tue Apr 29, 2025 6:52 pm

Joe1234 wrote: ↑
Tue Apr 29, 2025 6:18 am
paulfeakins wrote: ↑
Mon Apr 28, 2025 10:24 pm
 they just copy and paste.
A few more lines of code can prevent that
Not really, JavaScript can be turned off very easily.

UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk

User avatar
paulfeakins
Legendary Member
Online
Posts
10008
Joined
Mon Aug 22, 2011 11:01 pm
Location - London Gatwick, United Kingdom
Top

Re: My incomplete attempt to add a "Confirm Email" field

Quote

Post by nonnedelectari » Wed Apr 30, 2025 12:45 pm

paulfeakins wrote: ↑
Tue Apr 29, 2025 6:52 pm
Joe1234 wrote: ↑
Tue Apr 29, 2025 6:18 am
paulfeakins wrote: ↑
Mon Apr 28, 2025 10:24 pm
 they just copy and paste.
A few more lines of code can prevent that
Not really, JavaScript can be turned off very easily.
Which would render the entire checkout process unusable.
nonnedelectari
Active Member
Posts
243
Joined
Thu Mar 04, 2021 6:34 pm
Top
Post Reply
Return to “General Support”
Who is online

Users browsing this forum: pprmkr and 61 guests