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 '20 at 4:57
  • Which type of validation you'd like to have for the fields ? – Hamendra Sunthwal Aug 7 '20 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 '20 at 5:08
  • Just add "required" attribute in this html - <input type="checkbox" name="usercheckbox" required> – Hamendra Sunthwal Aug 7 '20 at 5:08
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 '20 at 5:58
  • Thanks it works like a charm @Sohel – Prits Aug 7 '20 at 7:02
  • In select box and checkbox this validation is not worked.@Sohel – Prits Aug 7 '20 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 '20 at 5:52

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.