1

i have created a form on checkout step.The form is allow user to navigate on the next step even if email pattern is not valid. How i can make this validation so user can not move until he enter the correct email patteren.

any help would be appreciated.

Screenshot is attached for more clarification. http://prntscr.com/ng3swn

email form html :

<div id="email" data-bind="fadeVisible: isVisible" class="acc-fields-sec">
<h2 data-bind="i18n: 'Checkout'" data-role="title"></h2>
<div id="checkout-step-title"
     data-role="content">
     <!-- form -->
    <each args="getRegion('login-methods')" render="" />
    <!-- end of form -->
    <form data-bind="submit: navigateToNextStep" class="form-next-step" novalidate="novalidate">
        <div class="actions-toolbar">
            <div class="primary">
                <button data-role="opc-continue" type="submit" class="button action continue primary">
                    <span><!-- ko i18n: 'Checkout'--><!-- /ko --></span>
                </button>
            </div>
        </div>
    </form>
</div>

Js code:

define(
[
    'ko',
    'uiComponent',
    'underscore',
    'Magento_Checkout/js/model/step-navigator',
    'Magento_Customer/js/model/customer'
],
function (
    ko,
    Component,
    _,
    stepNavigator,
    customer
) {
    'use strict';
    /**
     * check-login - is the name of the component's .html template
     */
    return Component.extend({
        defaults: {
            template: 'Magento_Checkout/email'
        },

        //add here your logic to display step,
        isVisible: ko.observable(true),
        isLogedIn: customer.isLoggedIn(),
        //step code will be used as step content id in the component template
        stepCode: 'email',
        //step title value
        stepTitle: 'Email',

        /**
         *
         * @returns {*}
         */
        initialize: function () {
            this._super();
            // register your step
            stepNavigator.registerStep(
                this.stepCode,
                //step alias
                null,
                this.stepTitle,
                //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
                 */
                9
            );

            return this;
        },

        /**
         * The navigate() method is responsible for navigation between checkout step
         * during checkout. You can add custom logic, for example some conditions
         * for switching to your custom step
         */
        navigate: function () {

        },

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

);

0

finally i found the solution for this.

Just added this KO JS to validate the form. Hope this will help to others.

define([
'jquery',
'ko',
'uiComponent',
'underscore',
'Magento_Checkout/js/model/step-navigator',
'Magento_Customer/js/customer-data',
'Magento_Customer/js/model/customer',
'mage/translate',
'Magento_Checkout/js/bindings/transitions'
], function ($, ko, Component, _, stepNavigator, customerData, customer, $t) {
'use strict';

return Component.extend({
    defaults: {
        template: 'Magento_Checkout/email'
    },

    loginFormSelector: 'form[data-role=email-with-possible-login]',

    isVisible: ko.observable(!customer.isLoggedIn()),

    initialize: function () {
        this._super();
        stepNavigator.registerStep('email', null, $t('Email'), this.isVisible, _.bind(this.navigate, this), 5);
        return this;
    },

    navigate: function () {
        if (customer.isLoggedIn()) {
            this.navigateToNextStep();
        } else {
            this.isVisible(true);
        }
    },

    validateEmail: function () {
        var emailValidationResult = customer.isLoggedIn();

        if (!customer.isLoggedIn()) {
            $(this.loginFormSelector).validation();
            emailValidationResult = Boolean($(this.loginFormSelector + ' input[name=username]').valid());
        }
        return emailValidationResult;
    },

    navigateToNextStep: function () {
        if (this.validateEmail()) {
            stepNavigator.next();
        } else {
            $(this.loginFormSelector + ' input[name=username]').focus();
        }
    }
});
});

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.