Email Validation Causing Invalid Email Address

We finally have our Magento 2 site live and have had multiple issues in the first 24 hours with customers submitting an invalid e-mail address due to the address validation that occurs on entering an e-mail address in the checkout form.
The built in behavior checks the e-mail address validity after two characters are entered in the top level domain.  When this is done, the field loses focus, so a third character typed does not end up in the field.  Since the majority of e-mail addresses fall into a .com, .edu, etc. top level domain, these addresses are ending up as invalid e-mail addresses on orders and our database as customers do not see that the script has prevented the third letter from being entered.
What would be the best code to alter to force this validation only on field exit, rather than validating it live during typing?

11 answers

Profile photo of Mall Staff 159070.00 $tone March 26, 2020
Public

Hi Mark,

What would be the best code to alter to force this validation only on field exit, rather than validating it live during typing?

The email validation functions you mentioned refers to Magento’s core feature. We had a overriding context for the email component. So, please try with these steps to customize the timeout of email validation function:

+ Open the Javascript file at  app/code/Ubertheme/Checkout/view/frontend/web/js/view/form/element/email.js
and find the code line:

checkDelay: 0,

and replace it with: 

checkDelay: 3000,

+ Once done, clean M2 cache and refresh your browser cache.
And check the issue you mentioned again.

Regards,
Mall.

#1
Profile photo of Mark Schuster 70.00 $tone March 26, 2020
Public

Unfortunately, that doesn’t seem to impact the behavior.  The validation is still occurring immediately after the second character in the top level domain is typed. All browser stored files cleared, Magento static files redeployed, and Magento cache cleaned.
I’ve screen captured the error so you can see exactly what I’m referring to -- since you can’t see what my fingers are doing, I did type a full .com, but the last letter was cut off due to the validation:
https://www.performersedition.com/JSValidation.mov

#2
Profile photo of Mall Staff 159070.00 $tone March 27, 2020
Public

Hi Mark,

I’ve screen captured the error so you can see exactly what I’m referring to — since you can’t see what my fingers are doing, I did type a full .com, but the last letter was cut off due to the validation:
https://www.performersedition.com/JSValidation.mov

I could not view the video format you provided, so I had to convert your video here: https://www.dropbox.com/s/6uoqldi9m3jiyoe/2020-03-27_09-27-10.MP4?dl=0
 
To solve the issue you mentioned, you can try with these steps:

+ Open the HTML template file at app/code/Ubertheme/Checkout/view/frontend/web/template/form/element/email.html
and find the line:

event: {change: emailHasChanged}"

and replace it with:

event: {blur: emailHasChanged}"

+ Once done, please redeploy static files, clean M2 cache and your browser cache. 

And let me know how it goes then.
 
Regards,
Mall.

#3
Profile photo of Mall Staff 159070.00 $tone March 28, 2020
Public

Hi Mark,
So, please provide me information of your instance:

  • Admin credentials of your M2 instance
  • SSH credentials of your M2 instance
  • And let me know the path to your M2 folder

I will help to check further and help you out.
PS. Please mark your reply private or simply switch this ticket to the private mode, then it’s safe to share your site info here. Only you and our technical team can access your site info. 

Regards,
Mall.

#5
Profile photo of Mall Staff 159070.00 $tone March 31, 2020
Public

Hi Mark,

I have checked your site further and found the root cause of the issue you mentioned. It related to the validation rule of Magento’s core on an email form field.

To handle your case, I have edited two files of our Checkout module as follows:

+ In the template file at  app/code/Ubertheme/Checkout/view/frontend/web/template/form/element/email.html, 
replaced the code line:

data-validate="{required:true, 'validate-email':true}"

with: 

data-validate="{required:true}"

+ And removed old custom code in the Javascript file at  app/code/Ubertheme/Checkout/view/frontend/web/js/view/form/element/email.js,
replaced the code line:

checkDelay: 3000,

with: 

checkDelay: 0,

Then, I cleaned M2 cache and clean browser cache. And the issue you mentioned has been solved. 
 
Please have a look again at your end and let me know how it goes.

PS. For your more information, I enabled the ‘developer’ mode in your M2 site for debugging purpose, please help to switch to the ‘production’ mode when you want.

Regards,
Mall.

#7
Profile photo of Mark Schuster 70.00 $tone April 13, 2020
Public

This fixed the problem, but we’re experiencing an issue when we generate static files again, the static files are not reflecting the change.  I can manually edit the static files and get it to work, but seems odd that the static files are not reflecting the change.

#8
Profile photo of Mall Staff 159070.00 $tone April 14, 2020
Public

Hi Mark Schuster,

but we’re experiencing an issue when we generate static files again, the static files are not reflecting the change.

That is strange because the guide steps suggested in my reply #7, it referred to editing the root of code files (files in our module). 

Please try to re-deploy static files in your instance following these steps at your end once again:

  1. Enable the maintenance mode.
  2. Clean all static files
  3. Redeploy static files
  4. Disable the maintenance mode
  5. Clean your browser cache

And let me know how it goes then.
 
Regards,
Mall.
 

#9
Profile photo of Mark Schuster 70.00 $tone April 18, 2020
Public

We think the final issue here was some server lag. We are still seeing issues with static content deployment of the theme not pulling the latest version of the files, but are dealing with those issues one by one -- we’ve seen it with image changes to the theme as well now.

#10
Profile photo of ubdev Staff 76600.00 $tone April 20, 2020
Public

Hi Mark,
We’re sorry for replying to you this late as we’ve just been back from the weekend.
Please consider if you can upgrade the server for a better performance.
If you need our further assistance, please get back to us here.
Regards,
Ubertheme team

#11

Please login or Register to Submit Answer

Written By

Comments