Formularios
En esta sección veremos las diferentes maneras que tenemos de obtener los valores de un formulario. Se debe procesar el envío del formulario a partir de su evento submit, sin recargar ni redirigir a otra página. Para ello es importante llamar al método preventDefault() del evento nada más empezar. De esta manera anulamos el comportamiento por defecto (recargar la página).
Obtener valores de los campos
El valor de un campo de cualquier formulario se obtiene a partir de la propiedad value del mismo. Hay varias maneras de acceder al campo del formulario. Utilizar la id para acceder al mismo es innecesario, ya que desde el objeto del formulario se puede hacer utilizando el valor del atributo name.
<form id="formProducto">
<p><input type="text" name="nombre" id="nombre" placeholder="Nombre" required></p>
<p><input type="text" name="descripcion" id="descripcion" placeholder="Descripcion" required></p>
<button type="submit">Añadir</button>
</form>Valores múltiples
A la hora de recoger valores de controles como input[type=checkbox] agrupados por un mismo name, o de listas de selección múltiple, el atributo value no servirá. En este caso al acceder al elemento por el nombre, nos devolverá una colección de elementos (RadioNodeList). Si queremos obtener los valores, por ejemplo, como un array de cadenas, tendremos que recorrer la colección filtrando los elementos que están seleccionados (checked).
<form id="formPersona">
<p><input type="text" name="nombre" id="nombre" placeholder="Nombre" required></p>
<p>
Aficiones:
<input type="checkbox" name="hobbies" value="tenis"> Tenis
<input type="checkbox" name="hobbies" value="comer"> Comer
<input type="checkbox" name="hobbies" value="viajar"> Viajar
<input type="checkbox" name="hobbies" value="caminar"> Caminar
</p>
<button type="submit">Añadir</button>
</form>Previsualizar imagen
Si tenemos un input de tipo archivo para seleccionar una imagen, y queremos previsualizar el contenido de la misma en un elemento <img> de la página, tenemos 2 opciones.
La primera sería serializarla en base64. Este es un formato que permite representar cualquier contenido binario en formato texto utilizando un conjunto de 64 caracteres. La imagen ocupará un poco más pero podremos enviarla a un servidor por ejemplo, serializada dentro de un objeto JSON junto al resto de campos del formulario (si el servidor requiere ese formato para transferir datos).
<form id="formPersona">
<p>Nombre: <input type="text" name="nombre" placeholder="Nombre" required></p>
<p>Avatar: <input type="file" name="avatar" required accept="image/*"></p>
<p><img src="" alt="" id="imgPreview"></p>
<button type="submit">Añadir</button>
</form>La segunda forma es usar createObjectURL, y la veremos a en la siguiente sección.
Usando FormData
Si nuestro servidor admite datos en formato multipart/form-data, podemos utilizar el objeto FormData para recoger toda la información del formulario, incluyendo campos de varias opciones o de tipo archivo. Es una colección parecida a Map donde se almacenar los valores en formato clave/valor.
Si queremos acceder a los valores almacenados, usaremos el método get, y para valores múltiples getAll. Si queremos previsualizar archivos de imagen sin tener que transformarlos previamente a Base64 (porque no necesitamos enviar un objeto JSON), podemos utilizar URL.createObjectUrl para generar una url a una representación interna del archivo (no es la ruta al archivo), que permite visualizar la imagen. Pero hay que liberar la memoria de dicha representación una vez cargada la imagen, ya que si no, hasta no cerrar el documento actual no se liberaría.
<form id="formPersona">
<p>Nombre: <input type="text" name="nombre" placeholder="Nombre" required></p>
<p>Avatar: <input type="file" name="avatar" required accept="image/*"></p>
<p><img src="" alt="" id="imgPreview"></p>
<p>
Aficiones:
<input type="checkbox" name="hobbies" value="tenis"> Tenis
<input type="checkbox" name="hobbies" value="comer"> Comer
<input type="checkbox" name="hobbies" value="viajar"> Viajar
<input type="checkbox" name="hobbies" value="caminar"> Caminar
</p>
<button type="submit">Añadir</button>
</form>Constraint Validation API
La API de validación de restricciones o Contraint Validation API permite gestionar la validación de un formulario HTML en conjunto con los validadores HTML que podemos utilizar en los diferentes controles del formulario.
Por ejemplo, podemos comprobar si un formulario <form> o de forma individual, cualquier elemento del formulario es válido o no llamando a los siguientes métodos sobre la referencia al mismo:
- checkValidity(): Devuelve un booleano indicando si el formulario/campo es válido o no (comprueba si tiene la pseudoclase :valid o :invalid).
- reportValidity(): Hace lo mismo pero además muestra los mensajes de error correspondientes al usuario.
Además, podemos establecer mensajes de error personalizados y mostrárselos al usuario el método setCustomValidity("Mensaje"), que asocia un mensaje de error personalizado al campo.
<form id="formPersona">
<p>Nombre: <input type="text" name="nombre" placeholder="Nombre" required></p>
<p>Avatar: <input type="file" id="avatar" name="avatar" required accept="image/*"></p>
<button type="submit">Añadir</button>
</form>Importante: En un campo donde establecemos un mensaje personalizado cuando detectamos un error, se debe establecer este mensaje a cadena vacía cuando no haya error. Mientras no esté vacío, se considera que hay error y el campo/formulario no se considerará válido.