Field Validation

Required Field

<label for="email">Email <span aria-hidden="true">*</span></label>
<input type="email" id="email" required>
<!-- :invalid CSS styles applied automatically on submit attempt -->

Invalid State

Use data-invalid="true" on the field container to show error state. Associate the error message with aria-describedby:

<label for="email">Email</label>
<input type="email" id="email"
       aria-describedby="email-error"
       aria-invalid="true">
<p id="email-error" role="alert">
  <span class="axicon render" data-name="Alert-Circle"></span>
  Please enter a valid email address.
</p>

Valid State

<input type="email" id="email" value="jane@example.com"
       aria-describedby="email-msg">
<p id="email-msg">
  <span class="axicon render" data-name="Check-Circle"></span>
  Email looks good.
</p>

Constraint Types

JavaScript Validation

const form = document.querySelector('form');

form.addEventListener('submit', (e) => {
  // Check validity before submitting
  if (!form.checkValidity()) {
    e.preventDefault();
    // Find first invalid field and focus it
    const invalid = form.querySelector(':invalid');
    if (invalid) invalid.focus();
  }
});

// Live validation on blur
form.querySelectorAll('input, textarea, select').forEach(field => {
  field.addEventListener('blur', () => {
    field.setAttribute('aria-invalid', !field.validity.valid);
  });
});

Accessibility

• Use aria-invalid="true" on the input when invalid — not just visual styles
• Connect error messages with aria-describedby pointing to the error id
• Use role="alert" on error messages so they're announced immediately
• Never rely on colour alone — include an icon or text label
• Required fields: use required attribute and indicate visually with * + legend