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

Imágen de perfil
Val: 162
Bronce
Ha disminuido 1 puesto en HTML (en relación al último mes)
Gráfica de HTML

Validar campos de un formulario con HTML5gráfica de visualizaciones


HTML

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 4 de Diciembre del 2016 por ScriptShow
6.541 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
6.542 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
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3787