Atributo formnovalidate HTML5: Controlar la validación de formularios

Este atributo formnovalidate HTML5 es muy útil para los nuevos elementos de formularios HTML5, de una manera muy fácil podemos decidir si los nuevos input HTML5 que contenga un formulario son validados automáticamente o no.

Sintaxis del atributo formnovalidate HTML5

Vamos a ver la sintaxis extraída de la documentación oficial.

<form action="action.php">
    Nombre: <input type="text" name="nombre">
    Edad: <input type="number" name="edad">
    Fecha nac: <input type="date" name="nacimiento">
    <input type="submit" value="Enviar">
    <input type="submit" formnovalidate="formnovalidate" value="Enviar sin validación">
</form>

Os explico el código superior de la sintaxis:

  • En el formulario superior tenemos 3 input para la entrada de datos y 2 input de tipo submit para enviar el formulario.
  • De los 3 input de entrada de datos 2 son de HTML5.
  • En cuanto a los 2 submit uno tiene el atributo formnovalidate. Esto quiere decir que cuando se haga click en él, el formulario se enviará sin las validaciones pertinentes en los input HTML5. En caso de clickar en el otro submit el formulario se enviará y se realizarán las validaciones HTML5 correspondientes.

Ejemplo del atributo formnovalidate HTML5

Aprovechando la sintaxis anterior voy a reciclar el código para realizar el siguiente ejemplo:

<form action="026-ejemplo-atributo-formnovalidate-html5.php" method="POST">
    Nombre: <input type="text" name="nombre">
    Edad: <input type="number" name="edad">
    Fecha nac: <input type="date" name="nacimiento">
    <input type="submit" value="Enviar">
    <input type="submit" formnovalidate="formnovalidate" value="Enviar sin validación">
</form>

Como el código del ejemplo superior es prácticamente idéntico a la sintaxis, creo que con la explicación de la misma sintaxis os vale para entender el ejemplo.

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.

Listado de los nuevos input HTML5

En esta url tenéis el listado completo de los nuevos input de HTML5.

compartir
Publicado por
Aner Barrena