Temario del Tutorial->39 - FORM (novalidate)


Hemos visto hasta ahora que html5 facilita la validación de datos sin tener en muchos casos la necesidad de utilizar Javascript mediante controles específicos o propiedades especiales como validate, pattern etc.

Lo que hay que tener en cuenta también que normalmente implementamos formularios para que el usuario realice la carga de datos y sean recibidos posteriormente por un servidor web. Es sabido que el programa en el servidor (PHP, ASPNet etc.) debe validar nuevamente los datos enviados desde el navegador. En esta circunstancia es muy útil desactivar todas las validaciones que hemos implementado en el cliente y para no tener que modificar cada uno de los controles contenidos en un formulario existe una propiedad que desactiva todos los controles al mismo tiempo.

Para desactivar las validaciones en el cliente solo tenemos que agregar la propiedad novalidate a la marca form.

Seguramente no encontraremos ningún sitio que tenga esta propiedad activa en un sitio en producción ya que solo tiene como objetivo permitir la depuración de datos en el servidor cuando recibe datos no validados.

Problema

Confeccionar una página que solicite la carga del nombre de usuario y una clave. No permitir enviar los datos al servidor si alguno de los controles está vacío, emplear para esto la propiedad required. Agregar la propiedad novalidate y comprobar que la información se envía al servidor independientemente que carguemos o no datos en los controles input.

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">
</head>
<body>
  <form action="#" novalidate>
      Usuario:
      <input type="text" id="usuario" required>
      <br>
      Clave:
      <input type="password" id="clave" required>
      <br>
      <br>
      <input type="submit">
  </form>
</body>
</html>

Lo único que hacemos es agregar la propiedad novalidate a la marca form:

  <form action="#" novalidate>

Con esto todas las validaciones que hemos especificado dentro del formulario el navegador las saltea. Recordemos borrar la propiedad novalidate luego. Esto nos es útil para ver que hace nuestro programa en el servidor cuando por ejemplo dejamos vacía la clave.

Retornar