Validations · KeenPureAdmin

The most common pattern. Error messages appear directly below each field. Best for forms where users need immediate field-level feedback.

Usage: Add pa-form-group--error to the form group and pa-form-help--error to the help text.

All errors collected in a single alert at the top. Good for accessibility and giving users a quick overview of all issues.

Best Practice: Combine summary block with inline errors for maximum accessibility. Screen readers can announce all errors at once.

The best of both worlds. Summary for overview, inline for specific guidance. This section is built with <.form_error_summary> and <.form_field> — the higher-level orchestrators that mirror svelte's FormErrorSummary / FormField.

Tip: <.form_error_summary> renders clickable links that jump to each field via its id; <.form_field> wires the label, control, and help/error text in one tag.

Space-efficient but less informative. Red border and icon indicate error without text message. User must infer the issue or hover/click for details.

Caution: This pattern provides poor accessibility. Consider using tooltips or aria-describedby for screen readers.

Error text positioned to the right of the input. Works well in horizontal form layouts with more screen real estate.

Helper text below the field transforms into error text when validation fails. Maintains consistent spacing.

Validation errors shown as toast notifications. Best for submit-level errors or async validation (e.g., server-side checks).

Toast preview (normally appears in corner):

La validación falló

Credenciales no válidas. Comprueba tu correo electrónico y contraseña.

Note: Toasts are ephemeral. Don't use them as the only validation feedback - users may miss them.

When to trigger validation affects user experience significantly.

Validates as user types. Can feel aggressive.

Correo electrónico Haz clic fuera para validar

Validates when field loses focus. Good balance.

All errors shown at once on submit. Traditional approach.

When validation depends on multiple fields (e.g., password confirmation, date ranges).

Validate each step before allowing progression. Prevents users from reaching the end with invalid data.

1

Cuenta

2

Perfil

3

Confirmar

Completa todos los campos obligatorios del paso 2 antes de continuar.

Estados de grupo de formulario

pa-form-group--success - Success state (green)
pa-form-group--warning - Warning state (yellow/orange)
pa-form-group--error - Error state (red)

Estados de campo

pa-input--success - Success border on input
pa-input--warning - Warning border on input
pa-input--error - Error border on input

Texto de ayuda/mensaje

pa-form-help - Base help text styling
pa-form-help--success - Green help text
pa-form-help--warning - Yellow/orange help text
pa-form-help--error - Red help text

Variantes de alerta (para bloques de resumen)

pa-alert pa-alert--danger - Error summary block
pa-alert pa-alert--warning - Warning summary block
pa-alert pa-alert--success - Success message block
pa-alert pa-alert--info - Info message block

Clases de utilidad de texto

text-danger - Red text color
text-warning - Yellow/orange text color
text-success - Green text color
text-secondary - Muted/gray text color

Nueva tarea asignada

Compilación completada

Mantenimiento del servidor

1. Errores de campo en línea

2. Bloque de resumen (parte superior del formulario)

3. Combinado: resumen + en línea (recomendado)

2 errors found:

4. Solo borde + icono (Minimal)

5. Indicadores del lado derecho

6. El texto de ayuda se transforma en error

7. Notificaciones Toast

8. Estrategias de temporización de validación

Al escribir (en tiempo real)

Al perder el foco (recomendado)

Al enviar

9. Validación multicampo / entre campos

10. Validación progresiva (formularios de varios pasos)

Referencia de clases CSS