[Code] Setting Minimum Password Requirements

1. Default Requirements

Memberstack requires that all passwords be at least 8 characters in length to be valid. It is not possible to circumvent this requirement because validation occurs server-side. 

2. Custom Requirements

You can add additional password requirements to the front end of your site (e.g. example below). It is important to note, however, that these requirements are not enforced on the backend and therefore can be circumvented in the front end. 

We've created a signup component which you can copy and paste directly into your site (custom code and all!). And we've made the project cloneable in Webflow in case you prefer that. 

We created the following tutorial to explain how the project works...

Here is the password validation code we used in the project.

<script>

var myInput = document.getElementById("psw");

var letter = document.getElementById("letter");

var capital = document.getElementById("capital");

var number = document.getElementById("number");

var length = document.getElementById("length");



// When the user starts to type something inside the password field

myInput.onkeyup = function() {

// Validate lowercase letters

var lowerCaseLetters = /[a-z]/g;

if(myInput.value.match(lowerCaseLetters)) {

letter.classList.remove("invalid");

letter.classList.add("valid");

} else {

letter.classList.remove("valid");

letter.classList.add("invalid");

}



// Validate capital letters

var upperCaseLetters = /[A-Z]/g;

if(myInput.value.match(upperCaseLetters)) {

capital.classList.remove("invalid");

capital.classList.add("valid");

} else {

capital.classList.remove("valid");

capital.classList.add("invalid");

}



// Validate numbers

var numbers = /[0-9]/g;

if(myInput.value.match(numbers)) {

number.classList.remove("invalid");

number.classList.add("valid");

} else {

number.classList.remove("valid");

number.classList.add("invalid");

}



// Validate length

if(myInput.value.length >= 8) {

length.classList.remove("invalid");

length.classList.add("valid");

} else {

length.classList.remove("valid");

length.classList.add("invalid");

}

}

</script>

Once you've loaded the component into a Webflow site, the Signup page should look like the gif below. An X indicates a password condition has not been met. A checkmark shows a valid condition.

3. Styling the components

Optionally, you can style the components.

The code from step 2 will automatically add or remove classes depending on what's been entered. Those classes are "invalid" or "valid" depending on the current state of things. 

If you want to display red text when the condition is invalid and green text when it's valid. Here's how.

1. Click the Style icon at the top of the panel.
2. Open the password-requirements field and enter Invalid.

3. Open the Typography panel and change the color.

You'll need to remove all of your combo classes before you publish. That said, I recommend you create a duplicate of your form and place it on a draft page before you remove the combo classes. This will ensure the styling is deleted when you clean up your CSS> 

Check the live page. By default everything should be grey, valid conditions have the default black text, and invalid conditions have red text.

4. Troubleshooting

Out of the box, the component should work just fine. If not, try these fixes.

Inspect the script

Sometimes the code breaks. Check this.

Select the second element at the bottom of the component and click the gear icon. Now you can inspect the Password Validation JavaScript.

There's no need to change anything here, but you'll want to make sure the element IDs in Webflow match the IDs in the code. 

Next, check the ID for each password component. There are four components just above the Create account button. Each one has a different ID.

Click a component and check the ID in the side panel. If you click all four components, you should see four different IDs: letter, length, capital, or number. If you see something different in the field, make sure the value matches the component on the page.  

That's it!

Now you know how to find, fix, and style a Webflow Signup component with password validation code.