How to add validation on checkbox , select option and text fields in magento 2?

Question

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 ?

Answer 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.

Answer 2

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.