25. Validación de formularios y datos con Javascript

Los formularios son una parte esencial de cualquier aplicación web. Son la interfaz principal entre el usuario y el servidor, permitiendo a los usuarios ingresar datos que se enviarán al servidor para su procesamiento. Sin embargo, antes de enviar estos datos, es fundamental asegurarse de que sean válidos. Aquí es donde entra en juego la validación de datos con Javascript.

JavaScript ofrece varias formas de validar los datos del formulario antes de enviarlos al servidor. Esto es importante porque ayuda a garantizar que los datos enviados al servidor sean precisos y completos, lo que puede ahorrar tiempo y recursos de procesamiento valiosos.

Validación de formulario con JavaScript

La validación de formularios con JavaScript normalmente implica el uso de eventos y funciones. Un evento es algo que sucede en la página, como un clic o una pulsación de tecla. Una función es un bloque de código que se ejecuta cuando se llama.

Por ejemplo, puede utilizar el evento "onsubmit" para llamar a una función de validación cuando el usuario intenta enviar el formulario. Esta función de validación puede luego verificar cada campo del formulario para garantizar que cumpla con ciertos criterios.

Aquí tienes un ejemplo de cómo puedes hacer esto:

<form id="miformulario" onsubmit="devolver validarformulario()">
  <tipo de entrada="texto" id="nombre" nombre="nombre">
  <tipo de entrada="enviar" valor="Enviar">
</formulario>

<guión>
función validarForm() {
  var x = document.forms["myForm"]["name"].valor;
  si (x == "") {
    alert("El nombre debe ser completado");
    falso retorno;
  }
}
</guion>

En el ejemplo anterior, la función validarForm() se llama cuando se envía el formulario. Comprueba si el campo "nombre" está vacío. Si está vacío, muestra una alerta e impide que se envíe el formulario.

Validación del tipo de datos

Además de verificar si un campo está vacío, es posible que también desee verificar si los datos que ingresa son del tipo correcto. Por ejemplo, si tiene un campo donde los usuarios deben ingresar un número, puede usar la función isNaN() de JavaScript para verificar si el valor ingresado es realmente un número.

<form id="miformulario" onsubmit="devolver validarformulario()">
  <tipo de entrada="texto" id="número" nombre="número">
  <tipo de entrada="enviar" valor="Enviar">
</formulario>

<guión>
función validarForm() {
  var x = document.forms["myForm"]["number"].valor;
  si (esNaN(x)) {
    alert("Debe ingresar números");
    falso retorno;
  }
}
</guion>

En el ejemplo anterior, la función validarForm() verifica si el valor ingresado en el campo "número" es un número. Si no es un número, muestra una alerta e impide que se envíe el formulario.

Validación del formato de datos

Es posible que también desees verificar que los datos que ingresas estén en el formato correcto. Por ejemplo, si tiene un campo donde los usuarios deben ingresar una dirección de correo electrónico, puede usar una expresión regular para verificar si el valor ingresado parece una dirección de correo electrónico.

<form id="miformulario" onsubmit="devolver validarformulario()">
  <tipo de entrada="texto" id="correo electrónico" nombre="correo electrónico">
  <tipo de entrada="enviar" valor="Enviar">
</formulario>

<guión>
función validarForm() {
  var x = document.forms["myForm"]["email"].valor;
  var atpos = x.indexOf("@");
  var dotpos = x.lastIndexOf(".");
  if (atpos<1 || puntopos<atpos+2 || puntopos+2>=x.length) {
    alert("Dirección de correo electrónico no válida");
    falso retorno;
  }
}
</guion>

En el ejemplo anterior, la función validarForm() comprueba si el valor ingresado en el campo "correo electrónico" parece una dirección de correo electrónico. Si no parece una dirección de correo electrónico, muestra una alerta e impide que se envíe el formulario.

Estos son sólo algunos ejemplos de cómo puede utilizar JavaScript para validar los datos del formulario. La validación de datos es una parte crucial del desarrollo de aplicaciones web y JavaScript ofrece muchas herramientas poderosas para ayudarlo a hacerlo de manera efectiva.

Siguiente página del libro electrónico gratuito:

76Introducción a jQuery

3 minutos