Before they type

Password rules.
Show them before submit.

The rules sit beside the field. Each one ticks off as they type. A rejection names the rule.

The short answer

Show the rules before the first character, and tick them off as the password changes. Use the same rules on the form and on the server. If the server says no, name the rule that failed. Don't grey out the button and leave the reason off the page.

Walk your signup
Stumblet, an apricot clay character with a navy collar, exploring with a folded map and a yellow note on its head.

What to show before submit

Put every password requirement beside the password field, on an empty form. Length, a capital letter, a number, a symbol: whatever you actually require. Tick a rule when the password meets it, and leave it unticked when it does not. Do that as they type. Don't wait for submit, or for red text, before you show the list.

The rules in the browser have to be the rules your server, or your auth provider, will actually enforce. One list, used in both places. If the form says eight characters is enough and the server wants twelve, the form says OK and the server then rejects it. That second failure is the one that makes people leave.

Some checks cannot run in the form. A breached-password list is one: the password has already shown up in a dump of stolen passwords. Say that in plain words before submit, with the other rules. “This password has appeared in a public leak” is a sentence someone can act on. “Password does not meet requirements” is not.

When the server does reject the password, repeat the rule that failed. Not a generic error, and not only “use a stronger password”. Name the length, the missing character, or the leak.

Don't disable the submit button to enforce a rule unless the page says which rule is blocking it. A greyed-out button with no reason is its own miss. The page for that is signup button.

What Stumblet flags

  1. 1Password rules aren't beside the field

    If a password field is on the page and the rules are not, the title is “Password rules aren't beside the field.” The fix is “Show the password rules beside the field before the first try.” The line is “The password field is here, and the rules aren't.”

    The page text counts when it states a length, uppercase, lowercase, a number, a special character, or “password must”. A checklist on the password field itself also counts, when the hint is at least two short chips such as “8+” and “Lowercase”. A hint on the confirm field does not count. Asking for the password twice, and a missing show-password control, are on confirm password.

    A rule that is only the password placeholder still counts, and it is a softer miss. The title is “Password rules vanish when you type.” The fix is “Show the password rules beside the field, not only in the placeholder.” The line is “The password rules are only in the placeholder, and they vanish when I type.” The placeholder disappears once someone types, so the rule has to sit beside the field.

    If those rules are not on the page yet, the walk focuses the password field. When the field is empty, it types a test password, in case a checklist is waiting for a value. If the rules are still not on the page, the finding stands. Put them on the empty form, before anyone types. An error that appears only after the fields are filled is the next check.

  2. 2A weak password error that never states the rule

    The walk quotes the first visible inline error after the fields are filled. If the error is about the password and it says stronger, too weak, not strong enough, or weak password, and it does not state a rule, the fix is “Say what a stronger password is, beside the field.” The line says it never says what stronger means. A rule here is a length, uppercase, lowercase, a number, a special character, or “password must”. When the error already states the rule, the fix is to show how to fix that line beside the field.

    When that error is about the password, the separate finding “Password rules aren't beside the field” is dropped. The page already said something about the password, so that line would repeat it.

    A rejection that comes back only after the account button is pressed needs the same sentence: name the rule. The free walk does not press that button unless you say you own the site and give a test email. When it does press it, and the page shows an error, the step says it pressed the button and quotes that error.

  3. 3The button stayed disabled

    A rule that blocks the button has to be written on the page. If the button stays disabled after the fields are filled and nothing says why, the title is the button's words, then “stayed disabled”. The fix is to enable it once the fields are filled, or say why it stays disabled. Name the field or the rule. The rest of that check is on signup button.

Questions

Where should password requirements sit on a signup form?

Beside the password field, before the first character. A hint on a confirm-password field does not count. If the rules are not on the page, the finding is “Password rules aren't beside the field.” The fix is “Show the password rules beside the field before the first try.”

Should the rules tick off while someone types?

Yes. Show the list first, then tick a rule when the password meets it and leave it unticked when it does not. A list that only appears as an error, after submit, makes them guess. Two short chips on the password field, such as “8+” and “Lowercase”, are enough for Stumblet to treat the rules as shown. It does not check that each chip ticks as you type.

What if the form says the password is fine and the server then rejects it?

The rules on the form were not the rules on the server. Keep one list, and use that same list in the form and in the check that creates the account. A mismatch means the form says OK and the server then rejects it.

How do I explain a breached-password check before submit?

Say it in plain words next to the other rules: this password has shown up in a public leak of stolen passwords. That check often cannot run in the browser, so it surprises people after submit. Name it up front. “Password does not meet requirements” does not say that.

What should a weak password error on signup say?

The rule that failed. A length, a missing character, or the leak. “Use a stronger password”, “too weak”, and “weak password” do not say what stronger means. Stumblet quotes that line. The fix is “Say what a stronger password is, beside the field.”

Asking for the password twice, and the show-password control, is on confirm password. Which fields to cut is on signup fields. What the first screen should say is on signup page copy. Asking for a work email is on work email. A provider button above the email is on social login. Running it yourself, and keeping the top five, is the new-user signup test. The short list is the onboarding checklist. The AI onboarding audit is the walk, and the signup prompt is the job it runs.

The walk is free. It starts on the home page.

Walk your signup