El primer paso que debemos dar sería indicar que un elemento es obligatorio de la siguiente forma:
<input name="email" required="" type="text"> |
Con esto conseguiremos que simplemente nos aparezca un mensaje genérico por parte del navegador. Si queremos personalizar dicho mensaje usaremos el atributo title:
<input name="email" required="" title="Debe introducir un email" type="text"> |
Si queremos ir más allá y validar que lo que escribamos en el email tenga un formato correcto añadiremos el atributo pattern:
<input name="email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" required="" title="Debe introducir un email con formato mail@ejemplo.com" type="text"> |
Con esto ya hemos conseguido validar el formato y mostrar un mensaje personlizado, pero podemos hacérselo un poco más fácil al usuario que debe introducir su email escribiéndole por defecto el formato dentro del mismo texto con el atributo placeholder:
<input name="email" pattern="^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$" placeholder="mail@ejemplo.com" required="" title="Debe introducir un email con formato mail@ejemplo.com" type="text"> |
Fuentes:
http://www.w3schools.com/tags/att_input_required.asp
