Descripción general de la validación de formularios HTML
Los formularios web son a menudo la parte más utilizada y esencial de las aplicaciones web. La validación de formularios es el proceso de validar los datos ingresados por el usuario contra las reglas predefinidas. La validación del formulario puede llevarse a cabo en el lado del cliente o en el lado del servidor. La validación de formulario HTML es la forma de validación del lado del cliente donde la validación de los datos se realizará antes de enviar los datos al servidor. La validación de formularios HTML es importante y útil porque mejora la interfaz de usuario del lado del cliente y el rendimiento de la aplicación web.
Validación de formulario HTML
Existen principalmente dos formas por las cuales se puede realizar la validación de formularios HTML,
- Uso de la funcionalidad incorporada HTML5
- Usando JavaScript
1. Uso de la funcionalidad incorporada HTML5
HTML5 proporciona esta característica de validación de formularios sin usar JavaScript. Los elementos del formulario tendrán atributos de validación agregados que permitirán la validación del formulario automáticamente. Los atributos de validación nos permiten especificar varios tipos de reglas en nuestros elementos de formulario. Nos permiten establecer la longitud de los datos, establecer una restricción en los valores de los datos, etc.
Veamos un ejemplo simple de validación de formulario HTML utilizando elementos de validación de formulario integrados y luego procederemos a la validación de formulario HTML usando JavaScript.
Ejemplo
Validación de formulario utilizando el atributo de validación HTML5: en este ejemplo, utilizaremos la etiqueta de validación de formulario requerida, lo que hará que los datos en ese campo sean obligatorios, de lo contrario el formulario no se enviará. A continuación se muestra el fragmento de código para el mismo junto con algunos estilos de un formulario web.
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
Name:
Por lo tanto, tenemos un formulario web muy simple junto con un solo campo de datos de entrada como "Nombre". Tenga en cuenta que hemos utilizado la palabra clave requerida en el elemento de etiqueta de entrada.
Salida :
Intentemos enviar el formulario sin ingresar ningún valor en el campo de nombre. Al enviarlo, recibirá el mensaje de error como "Complete este campo" y no se enviará el formulario.
Salida con datos en blanco
Por lo tanto, se puede ver que el mensaje de error no lo agregamos nosotros y lo proporciona el propio HTML.
Al igual que el atributo requerido proporcionado por HTML, hay varias etiquetas de formulario que están disponibles para usar. A continuación se muestra la lista de algunas etiquetas de validación de formularios,
- minlength: se utiliza para establecer la longitud mínima requerida de un elemento
- maxlength: se usa para establecer la longitud máxima requerida de un elemento
- patrón: se utiliza para definir una expresión regular
2. Usando JavaScript
JavaScript se usa ampliamente para la validación de formularios HTML, ya que proporciona más formas de personalizar y establecer las reglas de validación, también algunas de las etiquetas proporcionadas en HTML5 no son compatibles con las versiones anteriores de Internet Explorer. JavaScript se está utilizando durante mucho tiempo para la validación de formularios.
En la validación de formularios JavaScript, básicamente, definimos funciones para validar los datos antes de enviarlos al servidor. Podemos implementar cualquier lógica requerida para lograr las reglas de validación. JavaScript es más flexible de esta manera porque no hay restricciones para definir reglas. Pero es necesario tener conocimiento de JavaScript para implementar esto en comparación con la validación de formularios utilizando etiquetas integradas.
Veamos el ejemplo de validación de formularios usando JavaScript. Implementaremos el mismo ejemplo del formulario con solo una entrada como elemento de nombre.
Ejemplo:
.formData (
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
background-color: darkcyan;
position: absolute;
width: 100%;
)
form (
font-size: 30px;
)
form input (
margin-left: 10px;
font-size: 15px;
)
.errorMessage (
background-color: white;
width: 143px;
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
margin-left: 107px;
visibility: hidden;
border-radius: 10px;
position: relative;
float: left;
)
.errorMessage.top-arrow:after (
content: " ";
position: absolute;
right: 90px;
top: -15px;
border-top: none;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
border-bottom: 15px solid white;
)
Name:
function validateForm() (
var nameVal = document.forms("simpleForm")("name").value;
if(nameVal == null || nameVal == "") (
document.getElementsByClassName( "errorMessage" )(0).style.visibility = "visible";
document.getElementsByClassName( "errorMessage" )(0).innerHTML = "Please Fill out this field";
return false;
) else (
return true;
)
)
Del ejemplo anterior, hemos eliminado la etiqueta requerida del elemento de nombre "nombre". En su lugar, hemos agregado una etiqueta en el elemento de formulario. Como se mencionó anteriormente, escribiremos la función para la validación de la etiqueta que se agrega.
Hemos escrito una función llamada validateForm () que hará la validación. Estamos implementando la misma regla de verificar si los datos ingresados en el campo de nombre están en blanco o no. La lógica para verificar esto es al hacer clic en el botón Enviar, se llamará a esta función y se verificará si el valor ingresado es nulo o está en blanco. La función devolverá verdadero en caso de que los datos no estén nulos o en blanco, pero si los datos están en blanco o nulos, se mostrará el mensaje de error al usuario.
Salida
Si intentamos enviar el formulario sin ingresar ningún dato, deberíamos recibir el mensaje de error en la pantalla. Como se puede ver en el ejemplo que hemos diseñado el mensaje de error de la misma manera posible.
Salida con datos en blanco
Conclusión: Validación de formulario HTML
Así que hemos visto un ejemplo muy simple de validación de formularios en el lado del cliente. Principalmente hay dos formas de realizar la validación de formularios HTML. Primero está usando la funcionalidad incorporada proporcionada en HTML5 y segundo está usando JavaScript. Usando el primer método, no necesitamos escribir código adicional.
Artículos recomendados
Esta ha sido una guía para la validación de formularios HTML. Aquí discutimos la descripción general y dos formas de validación de formularios HTML mediante las cuales se pueden realizar. También puede echar un vistazo a los siguientes artículos para obtener más información:
- Eventos HTML
- Versiones de HTML
- Elementos HTML5
- Aplicaciones de HTML