← Tous les scripts

#36 - Password Validation v0.1

Use this simple method to confirm your members have entered a strong password.

Besoin d'aide avec ce MemberScript ?

Tous les clients de Memberstack peuvent demander de l'aide dans le Slack 2.0. Veuillez noter qu'il ne s'agit pas de fonctionnalités officielles et que le support ne peut être garanti.

Voir la démo

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 if 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="true"]');
            return validIcon && validIcon.style.display === 'flex';  // Check for 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;
            if (rule.startsWith('minlength-')) {
                const minLength = parseInt(rule.split('-')[1]);
                isValid = password.length >= minLength;

            else if (rule === 'special-character') {
                isValid = /[!@#$%^&*(),.?":{}|<>]/g.test(password);

            else if (rule === 'upper-lower-case') {
                isValid = /[a-z]/.test(password) && /[A-Z]/.test(password);

            else if (rule === 'number') {
                isValid = /\d/.test(password);
            const validIcon = validationPoint.querySelector('[ms-code-pw-validation-icon="true"]');
            const invalidIcon = validationPoint.querySelector('[ms-code-pw-validation-icon="false"]');
            if (validIcon && invalidIcon) {  // Check for existence before accessing style
                if (isValid) {
                    validIcon.style.display = 'flex';
                    invalidIcon.style.display = 'none';
                } else {
                    validIcon.style.display = 'none';
                    invalidIcon.style.display = 'flex';

        if (checkAllValid()) {
        } else {

    // Trigger keyup event after adding event listener
    var event = new Event('keyup');
Aucun élément n'a été trouvé.

Création du scénario Make.com

1. Téléchargez le modèle JSON ci-dessous pour commencer.

2. Naviguez jusqu'à Make.com et créez un nouveau scénario...

3. Cliquez sur la petite boîte avec trois points, puis sur Import Blueprint...

4. Téléchargez votre fichier et voilà ! Vous êtes prêt à relier vos propres comptes.

How to Encourage Members to Enter a Strong Password in Webflow

Memberscripts needed






Why/When would need to Encourage Members to Enter a Strong Password?

  • Enhanced Security: Strong passwords reduce the risk of unauthorized access and data breaches, protecting both the user's personal information and your site's integrity.
  • User Trust and Credibility: Demonstrating a commitment to security can increase user trust in your platform, enhancing your site's credibility.
  • Compliance with Best Practices: Encouraging strong passwords aligns with industry best practices for data security, which can be crucial for compliance and legal standards.
  • Operational Savings: Reduced overhead related to customer service dealing with compromised accounts.

How to Encourage Members to Enter a Strong Password in Webflow 

We all know the importance of strong passwords. They’re often the only thing standing between the world and our sensitive information. We have a lot of passwords that can be difficult to remember though. As a result, we tend to pick passwords for being easy to remember instead of strong. Just look at this most common password list – 123456 tops the list at the time of writing. 

We, and the people using our sites, obviously need encouragement to pick stronger passwords. A common way to improve password strength is to prevent people from creating weak passwords. We like to do this by including validation on forms where people are creating passwords.

Implementing Strong Password Validation in Webflow 

Password validation normally requires writing a regex pattern to include on a form’s password input field. Unfortunately, regular expressions can be difficult to write and debug at the best of times. This is why we’ve written a MemberScript that includes regular expressions for the most common forms of password validation. It also handles configuring your password input’s pattern attribute. This article covers how to easily set up our MemberScript to give your users password validation with real-time feedback.

Step 1: Create a Form with a Password Field

First, create a form with a password field. This can be something custom-built or premade, like Memberstack’s signup modals. Don’t forget to add status indicators and messages to give your users feedback when their password doesn’t meet your criteria!

Step 2: Integrating the Script 

Next, follow the tutorial for MemberScript #36 - Password Validation to add the MemberScript to your page and configure your validation. The MemberScript is fully configurable, with comments describing what each section’s regular expression does. If you make a mistake editing the script, just copy the script again to start fresh.

Step 3: Testing 

After adding password validation, it’s a good idea to test it to make sure it rejects passwords that don’t meet your criteria. This is also a good time to test your feedback and any indicator icons.


Encouraging members to enter a strong password boosts the security and trustworthiness of your Webflow site. By using our MemberScript to add password validation to your site, you can effectively guide users to create secure passwords, protecting their accounts and your platform.

We’ve published the clonable used in MemberScript #36’s tutorial. Check it out, use it to test your own regex expressions, and be inspired about ways to make your Webflow site more secure.

Take me to the Scripts