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

Imágen de perfil
Val: 209
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Validar campos de un formulario con HTML5gráfica de visualizaciones


HTML

Publicado el 4 de Diciembre del 2016 por Scriptshow (138 códigos)
7.811 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
estrellaestrellaestrellaestrellaestrella(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
7.812 visualizaciones desde el 4 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

No está probado en: Safari para Mac, otros Browsers para Linux, etc.
No es compatible con versiones inferiores a IExplorer 10.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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)

Imágen de perfil
5 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Muy buena opción, lastima que la compatibilidad nos limite.
Responder
5 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Es compatible para firefox?
Responder
Imágen de perfil
5 de Diciembre del 2016
estrellaestrellaestrellaestrellaestrella
Muy interesante!!!
Entiendo que al final todos los navegadores acabaran soportándolo...
Responder
xlife
23 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
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

Comentar la versión: 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3787