Validación de valores numéricos con HTML5

HTML5 agregó diferentes tipos de input como: email, tel, date, datetime, color, number, url, etc. Lo que nos permite de forma rápida hacer la validación sobre los datos que introducimos en cada uno de ellos. 

<input type="email" name="email"/>
<input type="date" name="fecha" />

Para la validación de números tenemos que utilizar el input number, de forma predeterminada este tipo de input solo acepta números enteros.

<input type="number" name="enteros" />

Para la validación de números decimales agregamos a la etiqueta input el atributo step, el cual se encarga de definir los intervalos validos para el control, por ejemplo si solo queremos que acepte valores de 10 en 10 en step tenemos que poner el valor 10, para los números decimales escribimos el valor any.

Valores enteros de 10 en 10
<input type="number" name="enteros" step="10"  />

Cualquier valor numérico, incluyendo números decimales.
<input type="number" name="decimales" step="any" />

Ademas del atributo step también podemos definir el atributo min y max para indicar los valores mínimo y máximo que se puede introducir en el control.

Cualquier valor numerico, comprendido entre 1 y 10 
<input type="number" name="decimales" step="any" min="1" max="10" />

Un comentario en “Validación de valores numéricos con HTML5”

  1. Dany dice:

    Qué se puiede hacer cuando el codigo no acepta el step?

Deja un comentario