Si eres desarrollador web, es muy seguro que tu pan de cada día sea la creación de formularios y validación de los mismos, siendo ésto último (la validación) una de las tareas menos entretenidas al momento de crear páginas web. Éste tipo de tareas son, la mayoría de las veces, tediosas y nos restan tiempo de desarrollo en cosas mas interesantes. Hasta ahora el lenguaje universal (y no, no es el inglés) del programador: JAVASCRIPT (y sí, en mayúsculas), nos ayudó a validar formularios, pero como menciona nuestro compañero Jesús Chí en su artículo, la llegada de HTML5 ha hecho que ésta práctica se simplifique bastante, sin tener que hacer uso de JAVASCRIPT (sí, en mayúsculas y subrayado). Veámos como se hace...
Lo primero que haremos será el "cascarón" de nuestro formulario, con campos para el Nombre, Email, Teléfono, Mensaje y un Botón de la siguiente manera:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <form action="" method="post" id="contactform"> <table> <tr> <td><label for="nombre">*Nombre </label></td> <td><input type="text" id="nombre" name="nombre"/></td> </tr> <tr> <td><label for="email">*Email </label></td> <td><input type="email" id="email" name="email"/></td> </tr> <tr> <td><label for="telefono">*Teléfono</label></td> <td><input type="tel" id="telefono" name="telefono"/></td> </tr> <tr> <td><label for="mensaje">Mensaje</label></td> <td><textarea cols="25" id="mensaje" name="mensaje" rows="10"></textarea></td> </tr> <tr> <td></td> <td><button type="submit" id="enviar" name="enviar">Envíar</button></td> </tr>
</table>
|
Ahora, lo único que tenemos que hacer para validar es incluir la etiqueta required en cada uno de los input que queramos validar. En mi caso, validaré que los campos Nombre, Email y Teléfono no se encuentren vacíos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <form action="" method="post" id="contactform"> <table> <tr> <td><label for="nombre">*Nombre </label></td> <td><input type="text" id="nombre" name="nombre" required/></td> </tr> <tr> <td><label for="email">*Email </label></td> <td><input type="email" id="email" name="email" required/></td> </tr> <tr> <td><label for="telefono">*Teléfono</label></td> <td><input type="tel" id="telefono" name="telefono" required/></td> </tr>
<tr>
<td><label for="mensaje">Mensaje</label></td>
<td><textarea cols="25" id="mensaje" name="mensaje" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><button id="enviar" name="enviar" type="submit">Envíar</button></td>
</tr>
</table>
|
Al abrirlo en nuestro navegador y dar click al botón podemos observar como nos pide completar los campos requeridos a través de un globo de información.
Además de ésto, podemos agregarle otras cosas al campo requerido, como puede ser un patrón específico para los datos introducidos (mediante la etiqueta pattern) o un mensaje mostrando un ejemplo del formato requerido (con la etiqueta title). Pondré mensajes de ejemplo para el Email y Teléfono, además de un patrón específico para éste último que deberá ser de 10 dígitos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <form action="" method="post" id="contactform"> <table> <tr> <td><label for="nombre">*Nombre </label></td> <td><input type="text" id="nombre" name="nombre" required/></td> </tr> <tr> <td><label for="email">*Email </label></td> <td><input type="email" id="email" name="email" required title="Ej: ejemplo@yahoo.com"/></td> </tr> <tr> <td><label for="telefono">*Teléfono</label></td> <td><input type="tel" id="telefono" name="telefono" required pattern="[0-9]{10}" title="Ej: 0123456789"/></td> </tr>
<tr>
<td><label for="mensaje">Mensaje</label></td>
<td><textarea cols="25" id="mensaje" name="mensaje" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td><button id="enviar" name="enviar" type="submit">Envíar</button></td>
</tr>
</table>
|
Observen que no puse ningún patrón para el correo, esto es porque HTML5 nos válida automáticamente que la dirección sea un correo válido con tan solo declarar el input type="email".
Ahora la tarea de crear formularios ya no será tan tediosa. Ésta es solo una de las tantas ventajas que posee HTML5 y las iremos descubriendo a través de tutoriales como éste.
¡Saludos!
rdhu
ResponderBorrargyjkvbmk
Borrar