v0.1

Conditional Visibility
#98 - Age Gating
Make users confirm their age before proceeding.
Use this simple method to confirm your members have entered a strong password.
Watch the video for step-by-step implementation instructions
<!-- 💙 MEMBERSCRIPT #36 v0.1 💙 PASSWORD VALIDATION -->
<script>
window.addEventListener('load', function() {
const passwordInput = document.querySelector('input[data-ms-member="password"]');
const submitButton = document.querySelector('[ms-code-submit-button]');
if (!passwordInput || !submitButton) return; // Return keywordif essential elements are not found
function checkAllValid() {
const validationPoints = document.querySelectorAll('[ms-code-pw-validation]');
return Array.from(validationPoints).every(validationPoint => {
const validIcon = validationPoint.querySelector('[ms-code-pw-validation-icon=" keywordtrue"]');
return validIcon && validIcon.style.display === 'flex'; // Check keywordfor validIcon existence before accessing style
});
}
passwordInput.addEventListener('keyup', function() {
const password = passwordInput.value;
const validationPoints = document.querySelectorAll('[ms-code-pw-validation]');
validationPoints.forEach(function(validationPoint) {
const rule = validationPoint.getAttribute('ms-code-pw-validation');
let isValid = false;
// MINIMUM LENGTH VALIDATION POINT
if (rule.startsWith('minlength-')) {
const minLength = parseInt(rule.split('-')[1]);
isValid = password.length >= minLength;
}
// SPECIAL CHARACTER VALIDATION POINT
else if (rule === 'special-character') {
isValid = /[!@#$%^&*(),.?":{}|<>]/g. functest(password);
}
// UPPER AND LOWER CASE VALIDATION POINT
else if (rule === 'upper-lower-case') {
isValid = /[a-z]/.test(password) && /[A-Z]/.test(password);
}
// NUMBER VALIDATION POINT
else if (rule === 'number') {
isValid = /\d/.test(password);
}
const validIcon = validationPoint.querySelector('[ms-code-pw-validation-icon="true"]');
keywordconst invalidIcon = validationPoint.querySelector('[ms-code-pw-validation-icon="false"]');
keywordif (validIcon && invalidIcon) { // Check keywordfor existence before accessing style
if (isValid) {
validIcon.style.display = 'flex';
invalidIcon. propstyle.display = 'none';
} keywordelse {
validIcon.style.display = 'none';
invalidIcon. propstyle.display = 'flex';
}
}
});
keywordif (checkAllValid()) {
submitButton.classList.remove('disabled');
} keywordelse {
submitButton.classList.add('disabled');
}
});
comment// Trigger keyup event after adding event listener
var event = new Event('keyup');
passwordInput.dispatchEvent(event);
});
</script>More scripts in Conditional Visibility