Just a simple component based approach to some password validation

password-confirmation-component.js

'use strict';

// This is a demonstration of writing clean Javascript - by adopting a component based approach.
// No jQuery, no poorly structured spaghetti code, composed of single purpose functions, has no hard coded selectors and works in IE10+.
// This is written in ES5. If build tools were used I would write this in ES7+.
// If Vue.js was used as well then a good chunk of the code wouldn't be necessary (and no need to attach to window).
window.passwordConfirmationComponent = {
    selectors: {},

    updatePasswordRuleFeedback: function (validation) {
        //TODO: Refactor to be DRY
        if (!validation.match) {
            this.selectors.passwordValidationMatch.classList.remove('hidden');
        } else {
            this.selectors.passwordValidationMatch.classList.add('hidden');
        }

        if (!validation.length) {
            this.selectors.passwordValidationLength.classList.remove('hidden');
        } else {
            this.selectors.passwordValidationLength.classList.add('hidden');
        }

        if (!validation.numeric) {
            this.selectors.passwordValidationNumeric.classList.remove('hidden');
        } else {
            this.selectors.passwordValidationNumeric.classList.add('hidden');
        }

        if (!validation.lower) {
            this.selectors.passwordValidationLower.classList.remove('hidden');
        } else {
            this.selectors.passwordValidationLower.classList.add('hidden');
        }

        if (!validation.upper) {
            this.selectors.passwordValidationUpper.classList.remove('hidden');
        } else {
            this.selectors.passwordValidationUpper.classList.add('hidden');
        }
    },

    enableSubmitButton: function enableSubmitButton() {
        this.selectors.submitButton.removeAttribute('disabled');
    },

    disableSubmitButton: function disableSubmitButton() {
        this.selectors.submitButton.setAttribute('disabled', true);
    },

    passwordsUpdated: function passwordsUpdated() {
        var passwordsMatch = function passwordsMatch(first, second) {
            return first === second ? true : false;
        };

        var passwordMeetsRequirements = function (first, second) {
            var lengthRegex = /^.{8,}$/;
            var numericRegex = /^(?=.*[\d])/;
            var lowerRegex = /(?=.*[a-z])/;
            var upperRegex = /(?=.*[A-Z])/;

            return {
                valid: lengthRegex.test(first)
                    && numericRegex.test(first)
                    && lowerRegex.test(first)
                    && upperRegex.test(first)
                    && passwordsMatch(first, second),
                length: lengthRegex.test(first),
                numeric: numericRegex.test(first),
                lower: lowerRegex.test(first),
                upper: upperRegex.test(first),
                match: passwordsMatch(first, second)
            };
        };

        var validation = passwordMeetsRequirements(
            this.selectors.passwordEntry.value || '',
            this.selectors.confirmPasswordEntry.value || ''
        );

        this.updatePasswordRuleFeedback(validation);

        if (validation.valid && passwordsMatch(this.selectors.passwordEntry.value, this.selectors.confirmPasswordEntry.value)) {
            this.enableSubmitButton();
        } else {
            this.disableSubmitButton();
        }
    },

    configureHandlers: function configureHandlers() {
        this.selectors.passwordEntry.addEventListener('input', this.passwordsUpdated.bind(this));
        this.selectors.confirmPasswordEntry.addEventListener('input', this.passwordsUpdated.bind(this));
    },

    init: function init(componentState) {
        this.selectors = componentState.selectors;
        this.configureHandlers();
        this.disableSubmitButton();
    }
};

document.addEventListener('DOMContentLoaded', function () {
    passwordConfirmationComponent.init({
        selectors: {
            passwordEntry: document.getElementById('password-input'),
            confirmPasswordEntry: document.getElementById('password-confirm-input'),
            submitButton: document.getElementById('activate-account-submit'),
            passwordValidationMatch: document.getElementById('password-validation-match'),
            passwordValidationLength: document.getElementById('password-validation-length'),
            passwordValidationNumeric: document.getElementById('password-validation-numeric'),
            passwordValidationUpper: document.getElementById('password-validation-upper'),
            passwordValidationLower: document.getElementById('password-validation-lower')
        }
    });
});