@nexa/forms

Progressive enhancement sobre la Constraint Validation API nativa del navegador.

Validación con 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 activa todo lo demás. Cada campo necesita name, conectado con <p data-nexa-error-for="ese-name">. Se valida al perder el foco la primera vez, y en cada cambio después.

Mensajes personalizados y clases automáticas

<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 reemplaza el mensaje nativo del navegador. Clases automáticas por campo: nx-touched, nx-dirty, nx-invalid, más aria-invalid.