var helperText = { charLength: document.querySelector('.helper-text .length'), lowercase: document.querySelector('.helper-text .lowercase'), uppercase: document.querySelector('.helper-text .uppercase'), special: document.querySelector('.helper-text .special'), match: document.querySelector('.helper-text .match'), charLengthIcon: document.querySelector('.helper-text .length .glyphicon'), lowercaseIcon: document.querySelector('.helper-text .lowercase .glyphicon'), uppercaseIcon: document.querySelector('.helper-text .uppercase .glyphicon'), specialIcon: document.querySelector('.helper-text .special .glyphicon'), matchIcon: document.querySelector('.helper-text .match .glyphicon'), }; var pattern = { charLength: function () { if (password.value.length >= 8) { return true; } }, lowercase: function () { var regex = /^(?=.*[a-z]).+$/; // Lowercase character pattern if (regex.test(password.value)) { return true; } }, uppercase: function () { var regex = /^(?=.*[A-Z]).+$/; // Uppercase character pattern if (regex.test(password.value)) { return true; } }, special: function () { var regex = /^(?=.*[0-9_\W]).+$/; // Special character or number pattern if (regex.test(password.value)) { return true; } }, match: function () { return password.value === confirm.value && password.value !== ''; } }; function updateBtn() { if (hasClass(helperText.charLength, 'text-success') && hasClass(helperText.lowercase, 'text-success') && hasClass(helperText.uppercase, 'text-success') && hasClass(helperText.special, 'text-success') && hasClass(helperText.match, 'text-success') ) { $('#register_sponsor').removeAttr('disabled').removeClass('disabled'); } else { $('#register_sponsor').attr('disabled', 'disabled').addClass('disabled'); } } function patternTest(pattern, response, icon) { if (pattern) { addClass(response, 'text-success'); addClass(icon, 'glyphicon-ok'); removeClass(icon, 'glyphicon-remove'); } else { removeClass(response, 'text-success'); addClass(icon, 'glyphicon-remove'); removeClass(icon, 'glyphicon-ok'); } } function addClass(el, className) { if (el.classList) { el.classList.add(className); } else { el.className += ' ' + className; } } function removeClass(el, className) { if (el.classList) el.classList.remove(className); else el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' '); } function hasClass(el, className) { if (el.classList) { return el.classList.contains(className); } else { new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className); } } $(document).ready(function () { // Listen for keyup action on password field $('#new_password').keyup(function () { $('.helper-text').css({ 'display': 'block' }); console.log(pattern.match()); // Check that password is a minimum of 8 characters patternTest(pattern.charLength(), helperText.charLength, helperText.charLengthIcon); // Check that password contains a lowercase letter patternTest(pattern.lowercase(), helperText.lowercase, helperText.lowercaseIcon); // Check that password contains an uppercase letter patternTest(pattern.uppercase(), helperText.uppercase, helperText.uppercaseIcon); // Check that password contains a number or special character patternTest(pattern.special(), helperText.special, helperText.specialIcon); patternTest(pattern.match(), helperText.match, helperText.matchIcon); if (hasClass(helperText.charLength, 'text-success') && hasClass(helperText.lowercase, 'text-success') && hasClass(helperText.uppercase, 'text-success') && hasClass(helperText.special, 'text-success') ) { addClass(password.parentElement, 'text-success'); } else { removeClass(password.parentElement, 'text-success'); } updateBtn(); }); // Listen for keyup action on password field $('#confirm_password').keyup(function () { console.log(pattern.match()); patternTest(pattern.match(), helperText.match, helperText.matchIcon); // Check that all requirements are fulfilled if (hasClass(helperText.match, 'text-success') ) { addClass(confirm.parentElement, 'text-success'); } else { removeClass(confirm.parentElement, 'text-success'); } updateBtn(); }); //$('#new_password').trigger('keyup'); //$('#confirm_password').trigger('keyup'); });