<form-matching-fields>

Web component wrapper for matching two text-type fields. See the README for installation details and API documentation.

Password Confirmation

Default validation message with required fields.

Password + Password again

<form-matching-fields>
  <label for="password">Password</label>
  <input id="password" type="password" required />

  <label for="password-again">Password again</label>
  <input id="password-again" type="password" required />
</form-matching-fields>

Email Verification

Validation works with other text-like types such as email.

Email + Verify email

<form-matching-fields>
  <label for="email">Email</label>
  <input id="email" type="email" required />

  <label for="email-again">Verify email</label>
  <input id="email-again" type="email" required />
</form-matching-fields>

Custom Message

Override the default text using the validation-message attribute.

Custom mismatch copy

<form-matching-fields validation-message="Please make sure {label_2} matches {label_1}.">
  <label for="email-custom">Email</label>
  <input id="email-custom" type="email" required />

  <label for="email-custom-again">Verify email</label>
  <input id="email-custom-again" type="email" required />
</form-matching-fields>

Localized Message (Hindi)

Localization is just custom content with placeholders.

Hindi validation message

<form-matching-fields validation-message="{label_1} और {label_2} का मान समान होना चाहिए।">
  <label for="password-hi">पासवर्ड</label>
  <input id="password-hi" type="password" required />

  <label for="password-hi-again">पासवर्ड फिर से</label>
  <input id="password-hi-again" type="password" required />
</form-matching-fields>

API Reference

For complete documentation of behavior and browser support, see the README.