Código de HTML - Validar campos de un formulario con HTML5

Filtrado por el tag: SQL

<<>>

Pos: 4

Val: 359

Ha mantenido su posición en HTML (en relación al último mes)

Validar campos de un formulario con HTML5

HTML

(4)

Publicado el 4 de Diciembre del 2016 por Scriptshow (141 códigos)

10.268 visualizaciones desde el 4 de Diciembre del 2016

Ejemplo para comprobar que los datos introducidos en los campos de un formulario son correctos.
Esto es posible gracias al atributo "pattern" incluido en HTML5 para algunas etiquetas tipo "input". El atributo utiliza expresiones regulares para comprobar el valor del "input" correspondiente.

Es compatible con las últimas versiones de algunos Navegadores Web.
No está probado en todas las plataformas, dispositivos, etc.
Es una de tantas posibilidades que ofrece HTML5.

Espero sea útil.

Un saludo

Requerimientos

Un navegador web o dispositivo compatible con HTML5

1.0
(4)

Actualizado el 15 de Diciembre del 2016 (Publicado el 4 de Diciembre del 2016)

gráfica de visualizaciones de la versión: 1.0

10.269 visualizaciones desde el 4 de Diciembre del 2016

No está probado en: Safari para Mac, otros Browsers para Linux, etc.
No es compatible con versiones inferiores a IExplorer 10.

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

</head>

<body>

<div style="padding:16px;border:#D0D0D0 1px solid;text-align:center">

<h2>Formulario</h2>

<form>

<input type="text" placeholder="Tu nombre" pattern="[A-Za-z]{2,}" title="Tu nombre Correcto" tabindex="1" required="required">

<br /><br />

<input type="email" placeholder="Tu correo" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" title="Tu E-Mail correcto" tabindex="2" required="required">

<br /><br />

<input type="text" placeholder="Tu número de teléfono" title="Tu teléfono correcto" pattern="[0-90-9]{9}" tabindex="3" required="required">

<br /><br />

<input type="submit" value="Probar Datos">

</form>

</div>

</body>

</html>

Comentarios sobre la versión: 1.0 (4)

kip

5 de Diciembre del 2016

Muy buena opción, lastima que la compatibilidad nos limite.

Responder

zendi

5 de Diciembre del 2016

Es compatible para firefox?

Responder

xve

5 de Diciembre del 2016

Muy interesante!!!
Entiendo que al final todos los navegadores acabaran soportándolo...

Responder

xlife

23 de Marzo del 2017

i want get de code sent to my phone , in the span of the script. or bypass this step...

<input aria-labelledby="pinVerifyLabel" id="pinVerifyInput" type="text" class="inputDefault" value="" onkeyup="pinValidation(false);" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false" name="dacPin">

Responder