2

I am trying to apply validation on my custom checkout step field but not able to do it..i want to use magento by default validations ..below is the code attached..

my-step-view.js

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

    /**
     * mystep - is the name of the component's .html template,
     * <Vendor>_<Module>  - is the name of your module directory.
     */
    return Component.extend({
        defaults: {
            template: '<vendor_module>/mystep'
        },

        // add here your logic to display step,
        isVisible: ko.observable(true),

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

            // register your step
            stepNavigator.registerStep(
                // step code will be used as step content id in the component template
                'step_code',
                // step alias
                null,
                // step title value
                'Custom Step',
                // observable property with logic when display step or hide step
                this.isVisible,

                _.bind(this.navigate, this),

                /**
                 * sort order value
                 * 'sort order value' < 10: step displays before shipping step;
                 * 10 < 'sort order value' < 20 : step displays between shipping and payment step
                 * 'sort order value' > 20 : step displays after payment step
                 */
                15
            );

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout steps
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         * When the user navigates to the custom step via url anchor or back button we_must show step manually here
         */
        navigate: function () {
            this.isVisible(true);
        },

        /**
         * @returns void
         */
        navigateToNextStep: function () {
            stepNavigator.next();
        }
    });
});

mystep.html

<!--The 'step_code' value from the .js file should be used-->
<li id="step_code" data-bind="fadeVisible: isVisible">
    <div class="step-title" data-bind="i18n: 'Step Title'" data-role="title"></div>
    <div id="checkout-step-title"
         class="step-content"
         data-role="content">

        <form data-bind="submit: navigateToNextStep" novalidate="novalidate">
            <div class="actions-toolbar">
                <div class="primary">
                    <input type="tel" class="input-text required-entry" name="custom" id="">
                    <button data-role="opc-continue" type="submit" class="button action continue primary">
                        <span><!-- ko i18n: 'Next'--><!-- /ko --></span>
                    </button>
                </div>
            </div>
        </form>
    </div>
</li>

checkout_index_index.xml

....
            <item name="my-new-step" xsi:type="array">
                                            <item name="component" xsi:type="string">vendor_module/js/view/my-step-view</item>

                                            <!-- Validations -->

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



                                            <item name="sortOrder" xsi:type="string">2</item>
                                            <item name="children" xsi:type="array">
                                                <!--add here child component declaration for your step-->
                                            </item>
                                        </item>

                                    </item>
                                </item>
....
2
  • Add your validation on navigateToNextStep method before passing to next step
    – Sohel Rana
    Jul 27, 2023 at 9:30
  • can you please provide me a code solution as i am a beginner..i need a validation for required field..@SohelRana Jul 27, 2023 at 9:57

1 Answer 1

1

Paste below code in checkout_index_index.xml In the below code we have created a template for the form and placed it as the children of new step we created.

<item name="custom-checkout-form-container" xsi:type="array">
    <item name="component" xsi:type="string">vendor_module/js/view/form</item>
    <item name="displayArea" xsi:type="string">ustom-checkout-form-container</item>
    <item name="provider" xsi:type="string">checkoutProvider</item>
    <item name="config" xsi:type="array">
        <item name="template" xsi:type="string">vendor_module/form</item>
    </item>
    <item name="children" xsi:type="array">
        <item name="custom-checkout-form-fieldset" xsi:type="array">
           <item name="component" xsi:type="string">uiComponent</item>
           <item name="displayArea"
                xsi:type="string">
                custom-checkout-form-fields</item>
            <item name="children" xsi:type="array">
                <item name="text_field" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/form/element/abstract<item>
                    <item name="config" xsi:type="array">
                        <item name="customScope" xsi:type="string">                      customCheckoutForm</item>
                        <item name="template" xsi:type="string">ui/form/field</item>
                        <item name="elementTmpl" xsi:type="string">ui/form/element/input</item>
                    </item>
                    <item name="provider" xsi:type="string">checkoutProvider</item>
                    <item name="dataScope" xsi:type="string">customCheckoutForm.text_field</item>
                    <item name="label" xsi:type="string" translate="true">Text Field</item>
                    <item name="sortOrder" xsi:type="string">1</item>
                    <item name="validation" xsi:type="array">
                        <item name="required-entry" xsi:type="string">true</item>
                    </item>
                </item>
            </item>
        </item>
    </item>
</item>

form.js

/*global define*/
define([
    'ko',
    'Magento_Ui/js/form/form',
    'Magento_Checkout/js/model/step-navigator'
], function (ko,Component, stepNavigator) {
    'use strict';
    return Component.extend({
        initialize: function () {
            this._super();
            
            return this;
        },
        /**
         * Form submit handler
         *
         * This method can have any name.
         */

        onSubmit: function () {
            // trigger form validation
            this.source.set('params.invalid', false);
            this.source.trigger('customCheckoutForm.data.validate');
            // verify that form data is valid

            if (!this.source.get('params.invalid')) {
                
                // do something with form data
                stepNavigator.next();
            }
        }
    });
});

form.html

<div>
    <form id="custom-checkout-form" class="form" data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset class="fieldset">
            <!-- ko foreach: getRegion('custom-checkout-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </fieldset>
        <button type="button" data-bind="click: onSubmit" class="action">
            <span data-bind="i18n: 'Submit'"></span>
        </button>
    </form>
</div>

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.