Same As Constraint Demo - Password Confirmation

This demo shows how the data-same-as attribute validates that two password fields contain identical values when submitting a form.

Password Confirmation Form

How it works:

  • data-same-as="#password" - Links the confirm password field to the original password field
  • Validation triggers when you try to submit the form
  • If passwords don't match, a validation message appears
  • The default message for password fields is: "Ce mot de passe doit être identique au précédent."
  • Form submission is prevented until passwords match

Test Scenarios

Try these test cases:

  1. Empty fields: Click submit with empty passwords (required validation triggers first)
  2. Short password: Enter less than 6 characters (minlength validation)
  3. Mismatched passwords: Enter different passwords and click submit
  4. Matching passwords: Enter identical passwords to see successful submission
  5. Real-time feedback: Type in one field, then the other, then submit