Validate phone field on checkout page

magento · Apr 1, 2020 · c54b8f3 · c54b8f3
1 parent 1116437
commit c54b8f3
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 0 deletions.
diff --git a/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontOnePageCheckoutPhoneValidationTest.xml b/app/code/Magento/Checkout/Test/Mftf/Test/StorefrontOnePageCheckoutPhoneValidationTest.xml
@@ -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>
diff --git a/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml b/app/code/Magento/Checkout/view/frontend/layout/checkout_index_index.xml
@@ -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>

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js b/app/code/Magento/Ui/view/base/web/js/lib/validation/rules.js
@@ -432,6 +432,13 @@ define([
             },
             $.mage.__('Please enter a valid phone number. For example (123) 456-7890 or 123-456-7890.')
         ],
+        'validate-phone': [
+            function (value) {
+                return utils.isEmptyNoTrim(value) ||
+                    /^[+]*[(]{0,1}[0-9]{1,4}[)]{0,1}[-\s\./0-9]*$/.test(value);
+            },
+            $.mage.__('Please enter a valid phone number. For example (123) 456-7890, 123-456-7890, +(123)4567890, +1234567890')
+        ],
         'validate-fax': [
             function (value) {
                 return utils.isEmptyNoTrim(value) || /^(\()?\d{3}(\))?(-|\s)?\d{3}(-|\s)\d{4}$/.test(value);