cancel
Showing results for 
Search instead for 
Did you mean: 

Add custom validator on phonenumber in checkout

SOLVED

Add custom validator on phonenumber in checkout

On checkout I want users to be able to use 0-9 + and - in the phone field. I'm trying to add a custom validator in my module but I can't seem to get it to work. I followed the steps in this tutorial but in the text is says it's only for the second checkout step but I need it for the first.


How would I get this to work for the phone field? Thanks in advance.

 

I currently have this:

 

checkout_index_index

 

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="shipping-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="shippingAddress" xsi:type="array">
                                                    <item name="children" xsi:type="array">

                                                        <item name="shipping-address-fieldset" xsi:type="array">
                                                            <item name="children" xsi:type="array">

                                                                <item name="telephone" xsi:type="array">
                                                                    <item name="validation" xsi:type="array">
                                                                        <item name="validate-phonenumber"
                                                                              xsi:type="string">true
                                                                        </item>
                                                                        <item name="stripped-min-length"
                                                                              xsi:type="string">10
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                    
                                                </item>
                                            </item>
                                        </item>
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">

                                                        <item name="additional-payment-validators" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="validate-phonenumber" xsi:type="array">
                                                                    <item name="component" xsi:type="string">
                                                                        BB_Checkout/js/view/validate-phonenumber
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

model/validate-phonenumber.js

define(
    [],
    function () {
        'use strict';
        return {
            /**
             * Validate something
             *
             * @returns {boolean}
             */
            validate: function() {
                return utils.isEmptyNoTrim(value) || !/[^\d\+\-]/.test(value);
            }
        }
    }
);

view/validate-phonenumber.js

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/additional-validators',
        'BB_Checkout/js/model/validate-phonenumber'
    ],
    function (Component, additionalValidators, validatePhonenumber) {
        'use strict';
        additionalValidators.registerValidator(validatePhonenumber);
        return Component.extend({});
    }
);

 

Any idea?

1 REPLY

Re: Add custom validator on phonenumber in checkout

Hi @SannNL,

 

Maybe this post from Bitbull can be useful: https://www.bitbull.it/en/blog/custom-js-validation-magento2/

--
If you've found one of my answers useful, please give "Kudos" or "Accept as Solution"