4

I want to add a validation to the address form in checkout step to ensure the address input is alphanumeric and ensure the input phone number is numeric. How to add the validation? Thanks

10

Magento is manage input fields validation using Html class and UI component.

From checkout_index_index.xml layout file, magento is manage checkout shipping address fields validation,here magento define class for your input fields.

So if we change class at here then it will working.

For example telephone field, If you want to add validation of numeric.

then you need add below code:

<item name="validation" xsi:type="array">
    <item name="YourClass" xsi:type="string">true</item>
</item>

So that may be like that:

<item name="telephone" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="tooltip" xsi:type="array">
            <item name="description" xsi:type="string" translate="true">For delivery questions.</item>
        </item>
    </item>
    <!-- add a validation code at here -->
    <item name="validation" xsi:type="array">
        <item name="validate-digits" xsi:type="string">true</item>
    </item>
    <!-- end of validation -->
</item>

But for billing address,you need add your validation from class Magento\Checkout\Block\Checkout\LayoutProcessor

   'telephone' => [
            /* Add by Amit Bera */
             'validation' => [
                    'mobileInD' => true,
                ],
             /* end by Amit Bera */   
                'config' => [
                /*
                    'tooltip' => [
                        'description' => 'For delivery questions.',
                    ],
                    */
                ],

You can find all validation class at Magento_Ui/web/js/lib/validation/rules.js For telephone no,you can add validate-digit

  • Hi @Amit What we can do for Street Address Validation as it's not mentioned in checkout_index_index.xml – Ankit Shah Dec 6 '16 at 7:39
  • Thanks ,How can i restict mobile number is only start with '07' ? – Ketan Borada Sep 13 '18 at 10:52
  • This almost helped me, because i'm doing custom module checkout .. so this trick doesn't work for me. :( its still render the validate message but still go to shipping step :( – fudu Sep 22 '18 at 9:24
0

I'd suggest validating beyond alphanumeric input and check that customer addresses are valid and accurate for delivering your Magento orders. A nice way to do that is to help the user by auto filling the address based on what they type while they are at the data entry stage.

There are a number of Magento extensions which will do this job quite elegantly in the Magento Marketplace.

As an example, I am currently working on an extension for the Magento platform, that is designed to perform this task. The way it works is that, as soon as the customer starts typing an address, a list of relevant options are shown:

AddressSearch

When the customer's address is shown in the list, they can then select it, and the form is automatically populated.

We have found that by using a service such as this, a customer can have their full address populated by only typing a small part. As a bonus, it's validated too!

I'm certainly not saying the service I'm working on is one you should use, just worth considering. There are plenty of options available to make this stage of the checkout process more user friendly for your customers.

DISCLAIMER: I work for PCA Predict, the people behind the 'Addressy' address verification service.

  • Please do not paste campaign links to your website. I have removed the link – 7ochem Oct 20 '16 at 11:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.