Comprender qué es la validación de formulario HTML5 y la etiqueta de entrada flotante

La implementación de la validación de formularios juega un papel vital para evitar que los usuarios malintencionados ingresen texto incomprensible en los campos del formulario. Además, restringe a los usuarios inexpertos de ingresar por error información incorrecta en el formulario.

Por supuesto, no querrá recopilar datos incorrectos de los usuarios de manera insegura. Por lo tanto, es imperativo que defina reglas de validación para formularios.

Durante años, hemos estado usando código JavaScript complejo y TL;DR (es decir, demasiado largo; no leído) para implementar la validación de formularios en el lado del cliente. Afortunadamente, con el lanzamiento de la "validación de formulario HTML5", ahora podemos agregar validaciones a un formulario con JavaScript mínimo.

Si bien la versión más reciente de HTML ofrece varios beneficios, el más importante es que viene con una gran cantidad de nuevos campos de entrada y atributos esenciales para validar un formulario sin la necesidad de escribir un código de validación JS (abreviatura de JavaScript) complicado.

Pero recuerde que los usuarios pueden frustrarse fácilmente al completar un formulario, especialmente cuando se enteran de que los datos que ingresaron son incorrectos pueden aumentar su frustración en mayor medida. Pero gracias a HTML5, agregar etiquetas de entrada flotantes puede validar los datos del formulario al mismo tiempo que los usuarios completan el formulario. De esta manera, los usuarios sabrán de inmediato en caso de que estén cometiendo algún error en los campos de entrada.

Por ejemplo, a continuación se muestra una imagen publicada en Dribble por Matt Smith que demuestra cómo funciona el patrón de etiqueta flotante cuando se aplica a un formulario:

Esta publicación cubre cómo puede implementar etiquetas de entrada flotantes al agregar validaciones a un formulario HTML5.

Pero antes de empezar

La mayoría de ustedes querrá saber primero el proceso de validación de un formulario HTML5. Después de todo, es posible que no todos tengan experiencia en escribir código de validación para un formulario HTML5. Además, es posible que no tenga conocimiento de los campos de entrada y atributos recientemente introducidos en HTML5.

Una descripción detallada de la validación de formularios HTML5

Cuando planee validar un formulario, se recomienda que primero comience con la validación del lado del servidor. Y, en caso de que sea un buen diseñador web, continúe agregando la validación del lado del cliente, ayudando a sus usuarios a obtener comentarios instantáneos, ya sea que estén completando el formulario con los datos correctos o no. Por ejemplo, proporcionar comentarios inmediatos a los usuarios cuando ingresan datos en el campo de la dirección de correo electrónico les permitirá saber que la dirección de correo electrónico que ingresaron era válida.

Una de las excelentes características de HTML5 es que ayuda a implementar la validación del lado del cliente sin depender de los scripts. Más bien, puede realizar dicha tarea haciendo uso de "atributos de validación" en los elementos de su formulario. Lo más importante es que solo necesita agregar el atributo "requerido" para un campo de entrada mientras su navegador se encarga del resto.

Aquí hay un ejemplo que explicará el uso del atributo requerido para agregar validación a un campo de entrada:

Name: <input type="text" name="yourname" required>

La línea de código anterior le informa a su navegador que el campo INPUT del nombre debe considerarse obligatorio (es decir, no puede dejarse en blanco).

Como puede ver, se muestra un marcador rojo en el cuadro de texto correspondiente al campo de entrada ‘Su nombre’. Pero tan pronto como se ingresa texto en el campo de entrada de nombre, el marcador se convierte en una marca de verificación que indica que el valor ingresado es válido.

Aparte de <input type="text">(es decir, los tipos de entrada de texto), HTML5 ahora admite varias opciones de entrada nuevas como búsqueda, correo electrónico, teléfono, fecha y hora, etc. En palabras simples, con HTML5 podemos escribir la siguiente línea de código:

<input type="text" name="email">

en algo como:

<input type="email" name="email">

Los navegadores de escritorio mostrarán el código anterior como cualquier campo de texto estándar.

Una cosa más importante que me gustaría señalarle es que: cuando intente ingresar atributos como requerido o tipo de entrada = "correo electrónico" en la demostración de CodePen, incluso sin ningún contenido, seguirá recibiendo un error. mensaje al hacer clic en el botón ‘ENVIAR’ sin ninguna dirección de correo electrónico válida:

En el ejemplo que hemos discutido anteriormente, puede ver que el navegador de forma predeterminada muestra un mensaje de error. Pero, ¿qué sucede si desea aplicar su propia regla de validación (es decir, personalizada) al valor de entrada? Aquí es donde el patrón Regex resulta útil.

Comprender los patrones RegEx

Es posible que haya visto patrones al ingresar una dirección de correo electrónico como abc@a. No hace falta decir que le gustaría que sus usuarios ingresen una dirección de correo electrónico real. Y, al especificar su propia elección de patrón que coincida con sus datos, ayudará a validar el valor ingresado. Por ejemplo, puede asegurarse de que el correo electrónico coincida con el patrón que contiene tres caracteres o más al final. Para hacerlo, deberá usar "Atributo de patrón" y Expresiones regulares (RegEx).

RegEx es básicamente un lenguaje que se utiliza para analizar o manipular el texto. Muy a menudo, las expresiones regulares se utilizan para realizar operaciones complejas (como buscar y reemplazar) para una mejor formación de los datos de texto. Hoy en día, puede encontrar el uso de expresiones regulares en casi todos los lenguajes de programación y secuencias de comandos. RegEx se puede usar para validar los datos ingresados ​​en los campos del formulario, imponiéndolos en los tipos de entrada utilizando el atributo de patrón de la siguiente manera:

<input id="phone" placeholder="111-111-1111" title="Text to convey pattern for telephone number" required pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

Además, si se produce algún error de validación, puede optar por determinar un atributo de título junto con el error de validación para arrojar un mensaje además de "¡Formato incorrecto!" usando la siguiente línea de código dada:

<input type="email" placeholder="Email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Kindly enter a valid email address here.">

Tenga en cuenta que no necesita escribir ningún patrón absurdo para todas y cada una de las entradas. En su lugar, en muchos casos solo necesitará asignar el atributo requerido a algún tipo particular de datos. Por ejemplo, un número mayor a 8 se verá así:

<input type="number" min="8" required>

Además, tenga en cuenta que no todos los navegadores admiten todos los atributos de validación disponibles. Tomemos, por ejemplo, el navegador Firefox no es compatible con el patrón "minlength".

Beneficio de usar la validación de formularios HTML5

La mayor ventaja de implementar la validación de formularios HTML5 es la retroalimentación instantánea. En su mayoría, se resaltará una especie de indicación mientras los usuarios completan algún campo en un formulario, para informarles si el valor ingresado es válido o no.

Ahora, cuando ingresa algo en el cuadro de texto, el color del borde cambia a verde de la siguiente manera:

Sin embargo, como puede ver, hay una desventaja en este enfoque. Incluso cuando agrega un valor no válido (o incompleto) en el campo ‘Nombre’, el usuario recibe una indicación de que el valor es correcto. Tal vez, puede pensar en agregar :invalid:not(:empty)al código. Lamentablemente, esta lógica no funcionará con los navegadores, ya que normalmente consideran que los elementos del formulario están vacíos.

¿Se pregunta qué hacer?

Puede intentar agregar el nuevo pseudo-selector llamado ":placeholder-shown" en el código de la siguiente manera:

<form>
  <label>
    <span>First Name</span>
    <input type="text" pattern=".{4,}" placeholder=" " required title="Enter at least 4 characters.">
  </label>
 
  <button>Submit</button>
 
</form>

Pero la mayoría de los navegadores no parecen brindar soporte para el marcador de posición que se muestra, por lo que es mejor que escriba un script para alternar una clase cuando el campo de entrada está vacío o no. Aquí está el código JavaScript para el mismo:

$('input:empty, textarea:empty').addClass('empty');
 
$('input').keyup(function() {
 
  if ($(this).val().trim() !== '') {
 
    $(this).removeClass('empty');
 
  } else {
 
    $(this).addClass('empty');
 
  }
 
});

NOTA: Recuerde eliminar el elemento de marcador de posición del marcado HTML anterior.

Ahora, cuando ejecute el fragmento de código anterior junto con el marcado HTML5, el resultado se verá así:

Como puede ver, el color del cuadro de texto permanece rojo hasta que no se cumple la validación aplicada al campo. Y al hacer clic en Enviar, aparece un mensaje de error al ingresar un nombre incompleto.

Pero, tan pronto como el usuario ingresa el texto completo (más de 3 caracteres), el color del borde del cuadro de texto cambia a verde.

¿Cómo puede agregar una etiqueta de entrada flotante en HTML5?

Y ahora, analicemos el enfoque de agregar una etiqueta de entrada flotante al validar su formulario HTML5. Si lo hace, ayuda a mejorar la apariencia del formulario. Aquí está el marcado HTML.

Para implementar el patrón de etiqueta flotante, deberá insertar la etiqueta justo debajo del <input>elemento en su marcado HTML:

<form>
 <label>
<input type="text" pattern=".{4,}" required title="Characters should not be less than 4.">
    <span>Your Name</span>
  </label>
 <label>
 <input type="email" required pattern="^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+.[A-Za-z]{2,}$" title="Please enter a valid email.">
    <span>Your Email</span>
  </label>
  <button>Submit</button>
 
</form>

CSS se verá algo como:

label {
  position: relative;
  display: inline-block;
}
label span {
  position: absolute;
  left: 20px;
  top: -2em;
  font-size: .75em;
  cursor: text;
  color: #f27853;
  transition: all 150ms ease;
}
input {
  border: 1px solid #f2f2f2;
  outline: none;
}
input:focus {
  border-color: #d9d9d9;
}
input:valid {
border-color: #42d142;
}
input:invalid {
  border-color: #ff8e7a;
}
input.empty {
  border-color: #d9d9d9;
}
input.empty + span {
 top: 50%;
 transform: translateY(-50%);
  font-size: 1em;
  background: none;
  color: #cccccc;
}
body {
  display: flex;
  min-height: 100vh;
  background: #f1f1f1;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}
form {
  margin: auto;
}
 
input, button {
  padding: 15px 20px;
  border-radius: 1px;
  border: 2px solid #bdbdbd;
}
 
button {
  border-color: #363636;
  background: #363636;
  color: #FFFFFF;
}

Y finalmente, escribe el código JavaScript:

$('input:empty, textarea:empty').addClass('empty');
$('input').keyup(function() {
  if ($(this).val().trim() !== '') {
    $(this).removeClass('empty');
  } else {
    $(this).addClass('empty');
  }
});

Producción:

Puede implementar varios efectos al usar etiquetas de entrada flotantes en HTML5, como:

• Agregue íconos con efecto de aparición/desaparición gradual mientras valida un formulario HTML5.
• Agite la entrada si los datos ingresados ​​no son válidos.
• Haga que el color de las entradas se atenúe cuando se completen correctamente.

Cosas para considerar

Cuando trabaje en la implementación de validaciones en un formulario HTML5, debe estar familiarizado con:

1. Compatibilidad con navegadores: los formularios HTML5 funcionan perfectamente en los navegadores modernos e IE10+. Aunque la versión 9 de IE y las versiones anteriores no son compatibles con los seudoselectores de validación, lo que le impide diseñar el formulario, seguirá funcionando correctamente.
2. Advertencia: una cosa que no puede realizar al aplicar validaciones a un formulario HTML5 es diseñar los mensajes de validación. Esto se debe a que los navegadores deshabilitan dicha funcionalidad.

Ultimas palabras

La implementación de validaciones en un formulario es crucial para agregar una capa adicional de seguridad a su sitio. Esto se debe a que evita que los usuarios infames agreguen texto malicioso como valor en los campos de su formulario. Además, proporcionar comentarios instantáneos a los usuarios cuando ingresan alguna entrada en un campo de entrada validado del formulario ayudará a mejorar su experiencia. Después de todo, no tendrán que perder tiempo reconociendo que cometieron un error al completar el formulario. Pero validar un formulario solo con JavaScript puede ser un desafío. Aquí es donde la validación de formularios HTML5 viene a su rescate.

Al aplicar validaciones a un formulario usando HTML5, no necesita escribir largas líneas de código JS complejo. En su lugar, puede implementar reglas de validación de formularios con una codificación mínima de JavaScript. Lo que es más importante, muchas características nuevas están disponibles con la validación de formularios HTML5, como la etiqueta de entrada flotante que hace que un formulario se vea magnífico, alentando a los usuarios a realizar el envío del formulario.