Form Validator Skill

This skill provides patterns for implementing robust client-side form validation.

Validation Patterns

Email Validation

const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

function isValidEmail(email) {
  return EMAIL_PATTERN.test(email);
}

Phone Validation

const PHONE_PATTERN = /^[\d\s\-+()]{10,}$/;

function isValidPhone(phone) {
  return PHONE_PATTERN.test(phone);
}

Required Field

function isRequired(value) {
  return value.trim().length > 0;
}

HTML Structure

Form Field with Validation

<div class="form-group">
  <label for="email" class="form-label"> Email <span class="required">*</span> </label>
  <input
    type="email"
    id="email"
    name="email"
    class="form-input"
    required
    aria-describedby="email-error"
    aria-invalid="false"
  />
  <span class="form-error" id="email-error" role="alert"></span>
</div>

Error Display Pattern

function showError(field, message) {
  const errorEl = document.getElementById(`${field.id}-error`);
  field.classList.add("is-invalid");
  field.setAttribute("aria-invalid", "true");
  if (errorEl) {
    errorEl.textContent = message;
  }
}

function clearError(field) {
  const errorEl = document.getElementById(`${field.id}-error`);
  field.classList.remove("is-invalid");
  field.setAttribute("aria-invalid", "false");
  if (errorEl) {
    errorEl.textContent = "";
  }
}

Validation Strategy

On Blur (Field Level)

field.addEventListener("blur", () => {
  if (field.hasAttribute("required") || field.value) {
    validateField(field);
  }
});

On Submit (Form Level)

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const result = validateForm(form);

  if (!result.isValid) {
    const firstInvalid = form.querySelector(".is-invalid");
    if (firstInvalid) firstInvalid.focus();
    return;
  }

  submitForm(form);
});

Error Messages

Accessibility Considerations

1. Use aria-describedby to link inputs to error messages
2. Use role="alert" on error containers
3. Don't rely only on color to indicate errors
4. Provide clear, actionable error messages
5. Don't clear the form on validation failure

Security Notes

• Client-side validation is for UX only
• Always validate on the server
• Sanitize inputs before display