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
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.
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
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.
No luck. Confirmed that the change is there, but the exact same behavior. Revised video below showing inspector (and converted to MP4 for you) with the blur event handler. You can see that whatever is causing the validation is changing the field to disabled and then back in the inspector window after the two characters are typed.
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.
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.
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.
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:
- Enable the maintenance mode.
- Clean all static files
- Redeploy static files
- Disable the maintenance mode
- Clean your browser cache
And let me know how it goes then.
Regards,
Mall.
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.
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
