Validar Formularios con HTML5

Los Formularios, son una gran herramienta en la web para lo que son los logueos y los registros de Usuarios, pero mas que solo diseñarlos hay que darles funcionalidades para que estos no dejen pasar datos vacíos o datos que no pertenece con lo que el formulario indica. Por ejemplo no seria conveniente dejar pasar un registro con nombres vacíos o en ves de poner una dirección de correo correcta se ponga cualquier otra cosa.

Para validarlos existen muchos lenguajes que nos pueden permite eso entre los cuales el destacado es JavaScript, pero quizás hoy en día ya no es el mas adecuado si de ahorrar código y tiempo se trata. Si antes la Alternativa mas eficaz era JavaScript ps ahora ya no lo es se ha implementado en la nueva Tecnología HTML5 la manera de validar formularios con solo un atributo el cual aprenderemos en esta entrada.

Validar Formularios con HTML5:

Para empezar con este Tutorial empezaremos creando un formulario básico, si no entiendes sobre como crear un formulario te recomiendo las entradas sobre formularios que tenemos en este Blog.

Código para crear nuestro Formulario:

<div id="formulario">
   <form name="form" action="#" method="post">
                       
       <fieldset>
                 <legend><h1>Logueo:</h1></legend>
     
         <label>Nombre: </label> <input type="text" name="nombre"/>
         <label>Correo: </label> <input type="password"  name="email"/>
     
            <input type="submit" value="Registrar" name="registrar"/>
       </fieldset>
   </form>

</div>

Como se habrán dado cuenta no es un Formulario muy atractivo el que creamos, ya que no tiene estilos que le den el color y el matiz de un formulario llamativo, lo hice sin estilos ya que no es la temática de esta entrada, así que a manera de ejemplo trabajaremos con este sencillo formulario:

Logueo:

Nombre: Correo:

Si se dan cuenta al querer registrase o acceder sin rellenar ningún campo del formulario este te deja hacerlo sin ningún problema lo cual es algo que no debe suceder en un sitio o empresa que requiere datos verdaderos por usuarios o al menos nombres que los identifiquen. Así que para validarlos solo tenemos que agregar el atributo required en cada input de los campos:

Código del Formulario validado con HTML5:

<div id="formulario">
<form name="form" action="#" method="post">    
   <fieldset>              

       <legend><h1&gt;Logueo:</h1></legend>
   
<label>Nombre: </label> <input type="text" name="nombre" required/>
<label>Correo: </label> <input type="password"  name="email" required/>

<input type="submit" value="Registrar" name="registrar"/>

   </fieldset>

</form>

</div>

Ahora cuando usemos el atributo required que añadimos a este formulario se darán cuenta que es lo único que necesitamos para validarlos Formularios, olvidándonos de los fastidiosos y largos códigos JavaScript que se usaban anteriormente. Ahora  en el nuevo formulario trata de registrarte o acceder sin rellenar ningún campo:

Logueo:

Nombre: Correo:

Si se dieron la molestia de probar el Formulario nos damos cuenta que necesitamos llenar los datos del formulario para que este recién nos deje acceder, así nos olvidamos de los largos códigos JavaScript que se solían usar anteriormente para hacer este tipo de validaciones.

Observación:

Aunque es mas factible validar con HTML5 ya que nos ahorra los usos intensivos de código JavaScript aun tiene desventajas ya que no funciona en los navegadores antiguos. Así que aun tenemos que ser pacientes y dar un tiempo a que esta tecnología evolucione en todos sus aspectos pero por el momento ya esta tomando fuerza.

Cualquier duda o Aporte Hacerlo por Comentarios. Gracias por su Tiempo!