LoginApp: Adding Password Validation Feedback

Published: October 24, 2025

When users register, one of the most common frustrations is submitting a form only to be told afterward that their password doesn’t meet the requirements.

Instead of waiting until after the user presses Register, I added real-time password validation right inside the form:

• Minimum length (at least 12 characters)
• Uppercase letter
• Lowercase letter
• A number
• A special character
• Matching confirmation password

The password values were stored using React state:

const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [passwordTouched, setPasswordTouched] = useState(false);
const [confirmPasswordTouched, setConfirmPasswordTouched] = useState(false);
            

I created a single variable that returns true only when all conditions pass:

const isPasswordValid =
  password.length >= 12 &&
  /[A-Z]/.test(password) &&
  /[a-z]/.test(password) &&
  /[0-9]/.test(password) &&
  /[!@#$%^&*(),.?":{}|<>]/.test(password) &&
  password === confirmPassword;
            

Each rule updates live while the user types. Messages are only shown after the field has been touched.

Example of a validation message:

{passwordTouched && (
  <p className={`${password.length >= 12 ? "text-green-500" : "text-red-500"} text-sm`}>
    {password.length >= 12
      ? "Password is long enough"
      : "Password must be at least 12 characters"}
  </p>
)}
            

This instantly tells the user whether they’ve met the length requirement with green/red visual feedback.

These improvements help prevent failed submissions and ensure the password is valid before the backend is involved.