3

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!

2

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

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.