JS14 – API de Formularios en JavaScript (Forms API)
1. ¿Qué es la Forms API?
La API de Formularios (Forms API) de JavaScript permite interactuar de manera
avanzada con los formularios HTML. Proporciona herramientas para:
• Acceder y modificar elementos del formulario.
• Gestionar eventos como submit, change, input, blur, keydown, etc.
• Validar formularios automáticamente o de forma personalizada.
• Enviar, resetear o modificar el comportamiento del formulario.
2. Acceso a los elementos del formulario
Podemos acceder a cualquier campo del formulario usando getElementById,
querySelector, etc.
const nombre = [Link]('nombre');
const email = [Link]('input[type="email"]');
Permite obtener o modificar valores:
• [Link] → Valor de campos de texto
• [Link] → Estado de un checkbox
• [Link] → Índice seleccionado de un select
3. Eventos de formulario
Los formularios lanzan distintos eventos útiles para validar y reaccionar:
Evento Cuándo se dispara
submit Al enviar el formulario
change Al cambiar el valor de un campo
input Cada vez que se escribe/modifica texto
blur Cuando un campo pierde el foco
keydown Al pulsar una tecla
4. Validación básica con HTML5
HTML5 permite validaciones sencillas sin usar JavaScript:
• required → campo obligatorio
• type="email" → verifica formato email
• min, max, maxlength, pattern
<input type="email" required>
<input type="text" pattern="[A-Za-z]{3,}" required>
5. Validación con checkValidity()
Este método comprueba si todos los campos del formulario son válidos.
const form = [Link]('miFormulario');
[Link]('submit', (e) => {
[Link]();
if ([Link]()) {
[Link]('Formulario válido');
} else {
[Link]('Formulario inválido');
}
});
¿Qué es [Link]();?
Es un método que detiene el comportamiento por defecto de un evento del
navegador.
La e hace referencia al objeto del evento (a veces llamado event), que se pasa
automáticamente a las funciones manejadoras de eventos (event handlers).
6. Validación dinámica de campos
Se puede validar un campo en tiempo real mientras se escribe:
const campo = [Link]('miCampo');
[Link]('input', () => {
if ([Link]()) {
[Link]('error');
} else {
[Link]('error');
}
});
7. Sustituir botón de envío con validación manual
Podemos usar un <button type="button"> para controlar cuándo enviar el formulario:
<form id="registro">
<!-- campos -->
<button type="button" id="enviar">Enviar</button>
</form>
<script>
[Link]('enviar').addEventListener('click', () => {
const form = [Link]('registro');
if ([Link]()) {
[Link]();
}
});
</script>
8. Mensajes personalizados con setCustomValidity()
Podemos asignar mensajes de error propios a campos:
const pass1 = [Link]('pass1');
const pass2 = [Link]('pass2');
function validarPassword() {
if ([Link] !== [Link]) {
[Link]('Las contraseñas deben coincidir');
} else {
[Link]('');
}
}
[Link]('blur', validarPassword);
[Link]('blur', validarPassword);
9. Evento invalid
El evento invalid se lanza cuando un campo no pasa la validación.
[Link]('invalid', e => {
[Link] = 'yellow';
}, true);
10. Validación en tiempo real con validity
Todos los campos de formulario tienen la propiedad .validity, que contiene
propiedades booleanas:
Propiedad Significado
valid Campo válido
valueMissing Falta un valor requerido
typeMismatch Formato incorrecto (email, url)
patternMismatch No cumple el patrón
tooLong Excede el maxlength
rangeOverflow Mayor que max
rangeUnderflow Menor que min
stepMismatch No cumple el paso (step)
customError Error personalizado activo
function validarEnTiempoReal(e) {
const campo = [Link];
[Link] = [Link] ? 'transparent' : 'yellow';
}
[Link]('miFormulario').addEventListener('input', validarEnTiempoReal);
11. Reiniciar el formulario con reset()
Resetea todos los campos al valor original:
[Link]('resetBtn').addEventListener('click', () => {
[Link]('miFormulario').reset();
});
12. Modificar atributos del formulario
Es posible cambiar dinámicamente:
• action → URL de destino
• method → GET o POST
• enctype → codificación (application/x-www-form-urlencoded, multipart/form-
data, etc.)
const form = [Link]('miFormulario');
[Link] = '[Link]
[Link] = 'POST';
[Link] = 'multipart/form-data';