HTML Validación de entrada


Ejemplo

La validación de entrada HTML se realiza automáticamente por el navegador en función de atributos especiales en el elemento de entrada. Podría reemplazar parcial o completamente la validación de entrada de JavaScript. Este tipo de validación puede ser evitada por el usuario a través de solicitudes HTTP especialmente diseñadas, por lo que no reemplaza la validación de entrada del lado del servidor. La validación solo se produce cuando se intenta enviar el formulario, por lo que todas las entradas restringidas deben estar dentro de un formulario para que se produzca la validación (a menos que esté utilizando JavaScript). Tenga en cuenta que las entradas que están deshabilitadas o de solo lectura no activarán la validación.

Algunos tipos de entrada más nuevos (como email , url , tel , date y muchos más) se validan automáticamente y no requieren sus propias restricciones de validación.

5

Necesario

Use el atributo required para indicar que se debe completar un campo para pasar la validación.

<input required>

Longitud mínima / máxima

Utilice los minlength y maxlength para indicar los requisitos de longitud. La mayoría de los navegadores evitarán que el usuario escriba más de un máximo de caracteres en el cuadro, lo que evitará que su entrada sea inválida incluso antes de intentar el envío.

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

Especificando un rango

Use los atributos min y max para restringir el rango de números que un usuario puede ingresar en una entrada de number de tipo o range

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />
5

Emparejar un patrón

Para obtener más control, use el atributo de pattern para especificar cualquier expresión regular que deba coincidir para pasar la validación. También puede especificar un title , que se incluye en el mensaje de validación si el campo no pasa.

<input pattern="\d*" title="Numbers only, please.">

Este es el mensaje que se muestra en Google Chrome versión 51 cuando intenta enviar el formulario con un valor no válido dentro de este campo:

Por favor, coincide con el formato solicitado. Sólo números, por favor.

No todos los navegadores muestran un mensaje para patrones no válidos, aunque hay soporte completo entre los navegadores modernos más usados.

Verifique el soporte más reciente en CanIUse e implemente en consecuencia.

5

Aceptar tipo de archivo

Para los campos de entrada de tipo de file , es posible aceptar solo ciertos tipos de archivos, como videos, imágenes, audios, extensiones de archivo específicas o ciertos tipos de medios . Por ejemplo:

<input type="file" accept="image/*" title="Only images are allowed">

Se pueden especificar varios valores con una coma, por ejemplo:

<input type="file" accept="image/*,.rar,application/zip">

Nota: al agregar el atributo novalidate al elemento de form o formnovalidate atributo formnovalidate en el botón de envío, se evita la validación de los elementos de formulario. Por ejemplo:

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

El formulario tiene campos que son necesarios para "publicar" el borrador pero no son necesarios para "guardar" el borrador.