Custom Checkout Validation: two fields must have the same value validation

Question

I created two custom password fields, the confirm field should check if the value is the same as .create-password-field. I saw that Magento 2 uses equalTo but I can't get that to work in a uiComponent template.

I copied password.html and editted it.

The template i use for the create field:

password-overwrite.html

<input class="input-text create-password-field" type="password" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
css: {focused: value() != '' && value() != ' '},
event: {
    keyup: validationSuccess
   },
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}"/>

password-overwrite-confirm-password.html

<input class="input-text" type="password" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
css: {focused: value() != '' && value() != ' '},
event: {
    keyup: validatePassword
   },
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}" data-validate="{equalTo:'.create-password-field'} />

But that doesn't actually do anything for me? Or does it have to do with the fact that I don't have the field required. Since they are activated by a checkbox i'm not able to set them as required because otherwise they will still be required even if it's unchecked.

Thanks in advance!

Answer 1

The equalTo function can only be used with required. So I wrote my own JavaScript validation function to show a 'fake error'.

validate-password.js

require([
'jquery',
'mage/validation'
], function ($) {

return validatePassword = function () {

    var checkImg = '<svg class="checkmark" version="1.1" xmlns="http://www.w3.org/2000/svg" width="768" height="768" viewBox="0 0 768 768"><path d="M288 519l339-340.5 45 45-384 384-178.5-178.5 43.5-45z"></path></svg>';

    var el = $('input#' + this.uid + '');
    var createAccountPasswordConfirm = $('div.field[name*="create_account_password_confirm"]');
    var passwordError = $('#password-error');

    if(el.val() === $('input[name*="create_account_password"]').val()){
        if (el.parent().parent().hasClass('_error')) {
            removeError(el, passwordError);
        }
        if (!el.siblings('.checkmark').length) {
            el.parent().prepend(checkImg);
        }
        el.addClass('_validated');
    } else {
        if (!el.parent().parent().hasClass('_error')) {
            if (el.hasClass('_validated')) {
                removeCheckmark(el);
            }
            el.parent().parent().addClass('_error');
            if(!$('#password-error').length){
                showError($);
            }
        }
    }
}
});

 var removeCheckmark = function (el) {
  el.removeClass('_validated');
  el.siblings('.checkmark').remove();
};

var showError = function ($) {
  var createAccountPasswordConfirm = $('div.field[name*="create_account_password_confirm"] .control');
  createAccountPasswordConfirm.append('<div class="field-error" id="password-error"><span data-bind="text: element.error">Please enter the same value again.</span></div>');
 };

 var removeError = function (el, passwordError) {
   el.parent().parent().removeClass('_error');
   passwordError.remove();
 };

password-overwrite-confirm.html (the template that i connected to the confirm field)

<input class="input-text" type="password" data-bind="
value: value,
valueUpdate: 'keyup',
hasFocus: focused,
css: {focused: value() != '' && value() != ' '},
event: {
    keyup: validatePassword
},
attr: {
    name: inputName,
    placeholder: placeholder,
    'aria-describedby': getDescriptionId(),
    'aria-required': required,
    'aria-invalid': error() ? true : 'false',
    id: uid,
    disabled: disabled
}"
/>