@nexa/forms

Progressive enhancement over the browser's native Constraint Validation API.

Validation with data-nexa-form

<form data-nexa-form action="/api/contact" method="post">
    <input class="nx-input" name="email" type="email" required />
    <p data-nexa-error-for="email"></p>
    <button type="submit">Enviar</button>
</form>

data-nexa-form turns everything else on. Each field needs a name, connected to <p data-nexa-error-for="that-name">. It validates on first blur, and on every change after that.

Custom messages and automatic classes

<input class="nx-input" name="message" required minlength="10"
       data-nexa-message="Contanos un poco más." />
<p data-nexa-error-for="message"></p>

data-nexa-message replaces the browser's native message. Automatic classes per field: nx-touched, nx-dirty, nx-invalid, plus aria-invalid.