Skip to content

Add validation phone field on checkout page #27537

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Aug 1, 2020
Merged

Add validation phone field on checkout page #27537

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c54b8f3
Validate phone field on checkout page
Usik2203 Apr 1, 2020
196e423
add slash and fix static issue
Usik2203 Apr 5, 2020
f951152
Merge branch '2.4-develop' into validate-phone-field-on-checkout
slavvka May 12, 2020
f5c2575
Merge branch '2.4-develop' into validate-phone-field-on-checkout
Usik2203 Jun 23, 2020
42889f8
uses magento validation rule
Usik2203 Jun 23, 2020
d9f626d
Add validation for phone to billing form
Usik2203 Jun 23, 2020
9706369
Merge branch '2.4-develop' into validate-phone-field-on-checkout
Usik2203 Jun 25, 2020
0433c82
Merge branch '2.4-develop' into validate-phone-field-on-checkout
Usik2203 Jun 29, 2020
3afe988
Fix phone
Usik2203 Jun 29, 2020
15ceda0
Update some phones
Usik2203 Jun 29, 2020
a692863
Fix phone
Usik2203 Jun 30, 2020
95be243
added testCaseId
engcom-Echo Jul 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions app/code/Magento/Checkout/Test/Mftf/Test/StorefrontOnePageCheckoutPhoneValidationTest.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->

<tests xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/testSchema.xsd">
<test name="StorefrontOnePageCheckoutPhoneValidationTest">
<annotations>
<features value="Checkout"/>
<stories value="Checkout validation phone field"/>
<title value="Validate phone field on checkout page"/>
<description value="Validate phone field on checkout page, field must not contain alphabetical symbols"/>
<severity value="MAJOR" />
</annotations>
<before>
<createData entity="_defaultCategory" stepKey="createCategory"/>
<createData entity="ApiSimpleProduct" stepKey="createProduct">
<requiredEntity createDataKey="createCategory"/>
</createData>
</before>
<after>
<deleteData createDataKey="createCategory" stepKey="deleteCategory"/>
<deleteData createDataKey="createProduct" stepKey="deleteProduct"/>
</after>

<actionGroup ref="StorefrontNavigateCategoryPageActionGroup" stepKey="openCategoryPageOnFrontend">
<argument name="category" value="$createCategory$"/>
</actionGroup>

<actionGroup ref="StorefrontAddSimpleProductToCartActionGroup" stepKey="addToCartFromStorefrontProductPage">
<argument name="product" value="$$createProduct$$"/>
</actionGroup>

<actionGroup ref="StorefrontOpenCheckoutPageActionGroup" stepKey="guestGoToCheckout"/>

<fillField userInput="Sample text" selector="{{CheckoutShippingSection.telephone}}" stepKey="enterAlphabeticalSymbols"/>
<see userInput="Please enter a valid phone number. For example (123) 456-7890, 123-456-7890, +(123)4567890, +1234567890" selector="{{CheckoutShippingSection.addressFieldValidationError}}" stepKey="checkPhoneFieldValidationIsPassed"/>
</test>
</tests>
3 changes: 3 additions & 0 deletions app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,9 @@
</item>
</item>
<item name="telephone" xsi:type="array">
<item name="validation" xsi:type="array">
<item name="validate-phone" xsi:type="number">0</item>
</item>
<item name="config" xsi:type="array">
<item name="tooltip" xsi:type="array">
<item name="description" xsi:type="string" translate="true">For delivery questions.</item>
Expand Down
7 changes: 7 additions & 0 deletions app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,6 +432,13 @@ define([
},
$.mage.__('Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.')
],
'validate-phone': [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Adding yet another validation rule to validate-phoneStrict and validate-phoneLax seems a bit redundant. I'd use one of the existing ones and expand them if necessary.

It also feels like something that can be easily confusing in the future when someone needs one of the validation rules and asks "what is the difference between them?".

Because there are two validation rules for phone numbers maybe it'd be good to add a configuration to specify whether to allow for "lax" validation or rather the more "strict" one (depending on the wants of the end-user).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Usik2203 This is a very apt comment. Please can you consider it.

Copy link
Contributor Author

@Usik2203 Usik2203 Jun 22, 2020 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Serializator , @engcom-Echo
I will check it. Thank you for advice!

function (value) {
return utils.isEmptyNoTrim(value) ||
/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/.test(value);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

According to my tests, the slash has to be escaped:

Suggested change
/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/.test(value);
/^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\.\/0-9]*$/.test(value);

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have fixed it.
Thank You for advice

},
$.mage.__('Please enter a valid phone number. For example (123) 456-7890, 123-456-7890, +(123)4567890, +1234567890')
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Static tests are failing because of this line length, can you please break it into multiple lines?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed by add //eslint-disable-line max-len on the end string
like on the others cases in this file
Thanks for advice

],
'validate-fax': [
function (value) {
return utils.isEmptyNoTrim(value) || /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/.test(value);
Expand Down