0

I have Amasty_Onestepcheckout module installed on a site running on Magento 2.4.1. I have to add a secondary email address that have to be validated as email and equal to the primary email input field.

The file in use is: vendor/magento/module-checkout/view/frontend/web/template/form/element/email.html

I have moved it in my theme and thought that by just copying the primary input field and changing id, etc and adding "equalTo" validation from M2 will work, but it does not.

<form class="form form-login" data-role="email-with-possible-login"
      data-bind="submit:login"
      method="post">
    <fieldset id="customer-email-fieldset" class="fieldset" data-bind="blockLoader: isLoading">
        <div class="field required">
            <label class="label" for="customer-email-login"><span data-bind="i18n: 'Email Address'"></span></label>
            <div class="control _with-tooltip">
                <input class="input-text"
                       type="email"
                       data-bind="
                            textInput: email,
                            hasFocus: emailFocused,
                            afterRender: emailHasChanged,
                            mageInit: {'mage/trim-input':{}}"
                       name="username"
                       data-validate="{required:true, 'validate-email':true}"
                       id="customer-email-login" />
                <!-- ko template: 'ui/form/element/helper/tooltip' --><!-- /ko -->
                <span class="note" data-bind="fadeVisible: isPasswordVisible() == false"><!-- ko i18n: 'You can create an account after checkout.'--><!-- /ko --></span>
            </div>
        </div>
        <br />
        <div class="field required">
            <label class="label" for="customer-email-confirm"><span data-bind="i18n: 'Confirm Email Address'"></span></label>
            <div class="control">
                <input class="input-text"
                       type="email"
                       data-bind="
                            textInput: email,
                            hasFocus: emailFocused,
                            afterRender: emailHasChanged,
                            mageInit: {'mage/trim-input':{}}"
                       name="username-confirm"
                       data-validate="{required:true, 'validate-email':true, equalTo:'#customer-email-login'}"
                       id="customer-email-confirm" />
            </div>
        </div>

        <!--Hidden fields -->
        <fieldset class="fieldset hidden-fields" data-bind="fadeVisible: isPasswordVisible">
            <div class="field">
                <label class="label" for="customer-password"><span data-bind="i18n: 'Password'"></span></label>
                <div class="control">
                    <input class="input-text"
                           data-bind="
                                attr: {
                                    placeholder: $t('Password'),
                                }"
                           type="password"
                           name="password"
                           id="customer-password"
                           data-validate="{required:true}" autocomplete="off"/>
                    <span class="note" data-bind="i18n: 'You already have an account with us. Sign in or continue as guest.'"></span>
                </div>

            </div>
            <!-- ko foreach: getRegion('additional-login-form-fields') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!-- /ko -->
            <div class="actions-toolbar">
                <input name="context" type="hidden" value="checkout" />
                <div class="primary">
                    <button type="submit" class="action login primary" data-action="checkout-method-login"><span data-bind="i18n: 'Login'"></span></button>
                </div>
                <div class="secondary">
                    <a class="action remind" data-bind="attr: { href: forgotPasswordUrl }">
                        <span data-bind="i18n: 'Forgot Your Password?'"></span>
                    </a>
                </div>
            </div>
        </fieldset>
        <!--Hidden fields -->
    </fieldset>
</form>
<!-- /ko -->

The result is both fields are present, but cant write in neither and second is not validate to be equal to the first.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.