<script type="text/javascript">
    $('.validation').hide();

    let $password = $("#password");
    let $currentPassword = $("#current_password");
    let $confirmPassword = $("#confirm_password");

    function isPasswordValid() {
        return (checkMinLength() && checkMaxLength() && checkMinNumber() && checkMinUpperCase() && checkMinLowerCase() && checkMinCustomCharacters());
    }

    function checkMinLength() {
        ${#data.password_rules.min_length}$
        return ($password.val().length >= ${data.password_rules.min_length}$);
        ${/data.password_rules.min_length}$
        ${^data.password_rules.min_length}$
        return true;
        ${/data.password_rules.min_length}$
    }

    function checkMaxLength() {
        ${#data.password_rules.max_length}$
        return ($password.val().length <= ${data.password_rules.max_length}$);
        ${/data.password_rules.max_length}$
        ${^data.password_rules.max_length}$
        return true;
        ${/data.password_rules.max_length}$
    }

    function checkMinNumber() {
        ${#data.password_rules.min_number}$
        let numbers = ($password.val().match(/[0-9]/g)|| []);
        return (numbers.length >= ${data.password_rules.min_number}$);
        ${/data.password_rules.min_number}$
        ${^data.password_rules.min_number}$
        return true;
        ${/data.password_rules.min_number}$
    }

    function checkMinUpperCase() {
        ${#data.password_rules.min_upper_case}$
        let upper = ($password.val().match(/[A-Z]/g) || []);
        return (upper.length >= ${data.password_rules.min_upper_case}$);
        ${/data.password_rules.min_upper_case}$
        ${^data.password_rules.min_upper_case}$
        return true;
        ${/data.password_rules.min_upper_case}$
    }

    function checkMinLowerCase() {
        ${#data.password_rules.min_lower_case}$
        let lower = ($password.val().match(/[a-z]/g) || []);
        return (lower.length >= ${data.password_rules.min_lower_case}$);
        ${/data.password_rules.min_lower_case}$
        ${^data.password_rules.min_lower_case}$
        return true;
        ${/data.password_rules.min_lower_case}$
    }

    function checkMinCustomCharacters() {
        ${#data.password_rules.min_custom_characters}$
        let regex = new RegExp('[' + RegExp.quote(htmlDecode("${data.password_rules.custom_characters}$]")) + ']', 'g');
        let custom = ($password.val().match(regex) || []);
        return (custom.length >= ${data.password_rules.min_custom_characters}$);
        ${/data.password_rules.min_custom_characters}$
        ${^data.password_rules.min_custom_characters}$
        return true;
        ${/data.password_rules.min_custom_characters}$
    }

    function arePasswordsMatching() {
        return $password.val() === $confirmPassword.val();
    }

    function hasPasswordChanged() {
        return $currentPassword.val() !== $password.val();
    }

    <!--Can submit -->
    function canSubmit() {
        return isPasswordValid() && arePasswordsMatching();
    }

    function passwordEvent() {
        if (isPasswordValid()) {
            $password.next().hide();
        } else {
            $password.next().show();
        }
    }

    <!--Check Passwords match-->
    function confirmPasswordEvent() {
        if (arePasswordsMatching()) {
            $confirmPassword.next().hide();
        } else {
            $confirmPassword.next().show();
        }
    }
    function htmlDecode(input) {
        let doc = new DOMParser().parseFromString(input, "text/html");
        return doc.documentElement.textContent;
    }

    <!--Check password has changed to the current password-->
    function passwordChangedEvent() {
        if (hasPasswordChanged()) {
            $currentPassword.next().hide();
        } else {
            $currentPassword.next().show();
        }
    }

    <!--Enable or disable the submit button-->
    function enableSubmitEvent() {
        $("#change-password-btn").prop("disabled", !canSubmit());
    }

    <!--Run passwords length check-->
    $password.focus(passwordEvent).keyup(passwordEvent).keyup(confirmPasswordEvent).keyup(passwordChangedEvent).keyup(enableSubmitEvent);

    <!--Run passwords match check-->
    $confirmPassword.focus(confirmPasswordEvent).keyup(confirmPasswordEvent).keyup(passwordChangedEvent).keyup(enableSubmitEvent);

    <!--Run submit button function code-->
    enableSubmitEvent();
</script>
