El documento aborda la validación de formularios en HTML5, destacando el uso del atributo 'required' para campos obligatorios y 'pattern' para validar correos electrónicos. Se presentan ejemplos prácticos de implementación, incluyendo el uso del atributo 'title' para proporcionar mensajes adicionales al usuario. Además, se menciona una alternativa simplificada utilizando 'type=email' para facilitar la entrada de datos.

1. Validando un formulario
con HTML5
www.codejobs.biz

2. Validando un formulario con HTML5
• Hola chicos, como ya todos sabemos HTML5
nos viene a facilitar la vida un poquito en el
tema de la validación de formularios que en
realidad lo recomendable es que no nada más
hagamos la validación con lo que HTML5 nos
ofrece sino que también coloquemos otro
código de validación como respaldo, pero a
continuación quiero dejarte por aquí el tema
de hacer validaciones con HTML5.

3. El atributo required
• Si bien, este atributo es quien nos ayudara a
que el campo sea “requerido” como su
nombre lo indica. require es un atributo de
tipo booleano y debemos colocarlo dentro del
elemento <input> por ejemplo:
<input type="text" name="nombre" required/>

4. Y punto importante si añadimos el atributo tittle
podemos hacerle saber al usuario un texto que le
diga por eje
<input type="text" title="El nombre es requerido" name="nombre" required/>
Lo único que hicimos anteriormente es validar que
el usuario haya colocado su nombre, el siguiente
atributo es pattern quien nos ayudara para hacer la
validación del Email que el usuario inserte en el
formulario, es decir, que el Email este escrito
correctamente.

5. <input type="text"
pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-
]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$"
name="Email"
required/>

6. También podemos enviarle un mensaje extra al
usuario haciendo uso de tittle como lo hicimos
con el campo nombre de la siguiente manera:
<input type="text" pattern="^[a-zA-Z0-
9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-
Z0-9-]+)*$" title="mail@ejemplo.com"
name="Email" required/>

7. Ahora bien, si te resulta fastidioso escribir todo
lo que conlleva pattern entonces solo escribe
type ="email " y quieres hacerlo más
simplificado entonces haz lo siguiente:
<input type="email" placeholder ="Escribe tu
Email" title="mail@ejemplo.com"
name="Email" required/>

8. Si quieres el código completo visítanos
en:
http://www.codejobs.biz