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
}"
/>