0

I have created 3 steps between review and Payment page in Magento 2.

But how to add validation on those fields which are ( checkbox , select option and text fields )

will anyone suggest anything for that ?

4
  • Show your sample code
    – Sohel Rana
    Aug 7, 2020 at 4:57
  • Which type of validation you'd like to have for the fields ? Aug 7, 2020 at 5:07
  • I have updated my checkout_index_index.xml , one JS and one HTML file. will you please check @SohelRana
    – Prits
    Aug 7, 2020 at 5:08
  • Just add "required" attribute in this html - <input type="checkbox" name="usercheckbox" required> Aug 7, 2020 at 5:08

2 Answers 2

1

Try the following way:

Here is the HTML content of your custom step:

<li id="custom_step" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Custom Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" id="custom-step-form">
            <input class="input-text"
                   type="email"
                   name="customer_email_address"
                   data-validate="{required:true, 'validate-email':true}"
                   placeholder="Enter your email"
                   id="customer_email_address" />
            <input type="checkbox" name="usercheckbox" id="usercheckbox" data-validate="{required:true}">Accept Terms and Condition
            <div class="actions-toolbar">
                <div class="primary">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

Now you need to modify your custom step component (JS). Specially check the navigateToNextStep method from the following code:

define(
    [
        'jquery',
        'ko',
        'uiComponent',
        'underscore',
        'Magento_Checkout/js/model/step-navigator',
        'mage/validation'
    ],
    function (
        $,
        ko,
        Component,
        _,
        stepNavigator
    ) {
        'use strict';

        return Component.extend({
            defaults: {
                template: 'SR_MagentoCommunity/custom-step'
            },

            isVisible: ko.observable(true),

            /**
             *
             * @returns {*}
             */
            initialize: function () {
                this._super();

                stepNavigator.registerStep(
                    'custom_step',
                    null,
                    'Custom Step Title',
                    this.isVisible,
                    _.bind(this.navigate, this),
                    15
                );

                return this;
            },

            navigate: function () {

                this.isVisible(true);
            },

            /**
             * @returns void
             */
            navigateToNextStep: function () {
                var dataForm = $('#custom-step-form');
                if(dataForm.validation() && dataForm.validation('isValid')) {
                    stepNavigator.next();
                }
            }
        });
    }
);

That's it.

3
  • Thanks for the answer i will check it but will you please help me with this question magento.stackexchange.com/questions/318918/… i have been struck there for days but didn't find any solution. Please take a look and help me with this@Sohel
    – Prits
    Aug 7, 2020 at 5:58
  • Thanks it works like a charm @Sohel
    – Prits
    Aug 7, 2020 at 7:02
  • In select box and checkbox this validation is not worked.@Sohel
    – Prits
    Aug 7, 2020 at 7:29
0

You can add your custom validation like this:

<item name="validation" xsi:type="array">
    <item name="required-entry" xsi:type="boolean">true</item>
    <item name="validate-regexp" xsi:type="string">REGEXP</item>
</item>

So here REGEXP needs to be a regular expression.

Then you will have to declare your own custom validation script to be able to handle validate-regexp

require([
'jquery', // jquery Library
'jquery/ui', // Jquery UI Library
'jquery/validate', // Jquery Validation Library
'mage/translate' // Magento text translate (Validation message translte as per language)
], function($){ 
$.validator.addMethod(
'validate-regexp', function (value, params) { 
return value.test(params); // Validation logic here
}, $.mage.__('Enter Valid Field'));

});

it may be params.test(value) instead of value.test(params)

Also you can directly just add "required" attribute in this html - <input type="checkbox" name="usercheckbox" required> if you have field in html.

1
  • Where to add item name validation is this in checkout_index_index.xml @Hamendra
    – Prits
    Aug 7, 2020 at 5:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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