Validation List Web Component Demo

Basic Password Validation

A password field with multiple validation requirements.

Username Validation

This example validates a username with capital letters, lowercase letters, and numbers.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <form-validation-list for="username">
    <ul>
      <li data-pattern="[A-Z]+">At least one capital letter</li>
      <li data-pattern="[a-z]+">At least one lowercase letter</li>
      <li data-pattern="[\d]+">At least one number</li>
    </ul>
  </form-validation-list>

  <button type="submit">Submit</button>
</form>

Strong Password Requirements

A more complex validation with length and special character requirements.

Password Strength Validation

Demonstrates multiple password requirements including length and special characters.

<form>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required>

  <form-validation-list for="password">
    <ul>
      <li data-pattern=".{8,}">At least 8 characters</li>
      <li data-pattern="[A-Z]+">At least one uppercase letter</li>
      <li data-pattern="[a-z]+">At least one lowercase letter</li>
      <li data-pattern="[\d]+">At least one number</li>
      <li data-pattern="[!@#$%^&*]+">At least one special character (!@#$%^&*)</li>
    </ul>
  </form-validation-list>

  <button type="submit">Submit</button>
</form>

Custom Styling with CSS Custom Properties

Customize the appearance using CSS custom properties.

Custom Icons and Colors

This example uses custom emojis and colors for the validation icons.

<style>
  .custom-styled {
    --validation-icon-matched: "✅";
    --validation-icon-unmatched: "❌";
    --validation-icon-size: 1.2em;
    --validation-matched-color: #28a745;
    --validation-unmatched-color: #dc3545;
  }
</style>

<form>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email" required>

  <form-validation-list for="email" class="custom-styled">
    <ul>
      <li data-pattern=".+@.+">Contains @ symbol</li>
      <li data-pattern=".+@.+\..+">Valid email format</li>
      <li data-pattern=".{6,}">At least 6 characters</li>
    </ul>
  </form-validation-list>

  <button type="submit">Submit</button>
</form>

Customization Options

The component provides several attributes to customize its behavior and styling.

Custom Trigger Event and Delay

Use trigger-event="blur" to validate only when the field loses focus, and each-delay="0" to remove the cascade animation.

<form-validation-list
  for="custom-trigger"
  trigger-event="blur"
  each-delay="0">
  <ul>
    <li data-pattern="[A-Z]+">Capital letter</li>
    <li data-pattern="[a-z]+">Lowercase letter</li>
    <li data-pattern="[\d]+">Number</li>
  </ul>
</form-validation-list>

Custom CSS Classes

Customize the class names applied to fields and rules for easier integration with CSS frameworks.

<style>
  .is-valid { border-color: green; }
  .is-invalid { border-color: red; }
  .rule-pass { color: green; }
  .rule-fail { color: red; }
</style>

<form-validation-list
  for="custom-classes"
  field-valid-class="is-valid"
  field-invalid-class="is-invalid"
  rule-matched-class="rule-pass"
  rule-unmatched-class="rule-fail">
  <ul>
    <li data-pattern=".{5,}">At least 5 characters</li>
    <li data-pattern="[!@#]+">Special char (!@#)</li>
  </ul>
</form-validation-list>

JavaScript API

Listening to validation events and using the programmatic API.

Event-Driven Validation

This example shows how to listen to validation events.

<script>
  const validationList = document.querySelector('#api-validation');

  validationList.addEventListener('form-validation-list:validated', (e) => {
    const { isValid, matchedRules, totalRules } = e.detail;
    console.log(`Matched ${matchedRules} of ${totalRules} rules`);
  });

  // Programmatically trigger validation
  const isValid = validationList.validate();
  console.log('Is valid:', isValid);

  // Check current state
  console.log('Current state:', validationList.isValid);
</script>

Internationalization (i18n)

The validation-message attribute allows you to customize the error message shown by the browser, including support for other languages.

Spanish Validation Messages

Using validation-message="Por favor, cumple todos los requisitos ({matched} de {total})" displays the validation error in Spanish.

<form>
  <label for="contrasena">Contraseña:</label>
  <input
    type="password"
    id="contrasena"
    name="contrasena"
    required>

  <form-validation-list
    for="contrasena"
    validation-message="Por favor, cumple todos los requisitos ({matched} de {total})">
    <ul>
      <li data-pattern="[A-Z]+">Al menos una letra mayúscula</li>
      <li data-pattern="[a-z]+">Al menos una letra minúscula</li>
      <li data-pattern="[\d]+">Al menos un número</li>
      <li data-pattern="[!@#$%^&*]+">Al menos un carácter especial (!@#$%^&*)</li>
      <li data-pattern=".{8,}">Al menos 8 caracteres</li>
    </ul>
  </form-validation-list>

  <button type="submit">Enviar</button>
</form>