#Nr. 36 - Passwort-Überprüfung

Verwenden Sie diese einfache Methode, um zu bestätigen, dass Ihre Mitglieder ein sicheres Passwort eingegeben haben.

Video Tutorial

Loom
tutorial.mov

Watch the video for step-by-step implementation instructions

The Code

71 lines
Paste this into Webflow
<!-- 💙 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>

Script Info

Versionv0.1
PublishedNov 11, 2025
Last UpdatedNov 11, 2025

Need Help?

Join our Slack community for support, questions, and script requests.

Join Slack Community
Back to All Scripts

Related Scripts

More scripts in Conditional Visibility