INICIO

CAMPOS OBLIGATORIOS EN FORMULARIOS | ¿CÓMO HACERLO?

Tienes un formulario en HTML.

Y necesitas que uno de los campos sea obligatorio.

Uso del atributo required

Tienes un campo tal que así:

<input type="text" name="mail">

Y necesitas que sea obligatorio llenarlo antes de poder enviar el formulario.

Pues le añades el atributo required.

Así:

<input type="text" name="mail" required>

Si el usuario intenta enviar el formulario sin rellenar ese campo, le aparecerá un aviso.

Uso de required en un select

En el caso del select, el atributo required tiene su peculiaridad.

Básicamente porque en un select siempre aparece marcada la primera opción por defecto.

Y esta no puede des-seleccionarse.

Pero si lo dejamos ahí, puede ser que el usuario no ponga ninguna voluntad en cambiar la opción seleccionada.

Y nosotros queremos que sí lo haga.

¿Cómo haríamos el select para forzar una elección voluntaria?

Pues tan sencillo como esto:

<select name="verdeorojo" required>
    <option></option>
    <option value="verde">Verde</option>
    <option value="rojo">Rojo</option>
</select>

Ahora la primera opción no tiene valor asignado, y por eso podemos añadir el atributo required al select.

En este caso no tenía ni valor ni texto, aunque sería equivalente hacerlo con texto o un valor vacío.

<option value="">¿Verde o rojo?</option>

Perfecto.

La excepción

Si el select fuese de selección múltiple, no sería necesario añadir la opción vacía, porque en los select de selección múltiple no aparece nada seleccionado por defecto.

Por ejemplo:

<select name="aficiones" multiple required>
    <option value="correr">Correr</option>
    <option value="nadar">Nadar</option>
    <option value="beber">Beber</option>
    <option value="cantar">Cantar</option>
</select>

Bien.

Cuidado con la validación

Naturalmente, esto es una solución de lado cliente.

Bonito, simple y estético en la mayoría de los navegadores.

Si alguien quiere enviar el formulario vacío, va a poder hacerlo, independientemente de los impedimentos que le hayas escrito.

Todos sabemos saltarnos las reglas, ¿verdad?.

Por eso es importante que la validación del formulario se repita una vez hayas recogido los datos en el servidor.