v0.1

Bedingte Sichtbarkeit
#98 - Altersfreigabe
Die Benutzer müssen ihr Alter bestätigen, bevor sie fortfahren.
Verwenden Sie diese einfache Methode, um zu bestätigen, dass Ihre Mitglieder ein sicheres Passwort eingegeben haben.
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