Validar la longitud de campos con Javascript

En este artículo os mostraremos múltiples enfoques para implementar una validación de longitud de campos en Javascript. Esperamos que os sea de utilidad para vuestros futuros proyectos y que los sepáis aplicar sin ninguna confusión o duda.

Es muy común en proyectos web, el implementar una validación sobre la longitud de un campo en el lado del cliente (navegador). Por ejemplo, al comprobar que en cuadro de texto donde se va a introducir una dirección no se superen los 50 caracteres o limitar un área de texto para que no supere los 1000 caracteres. Esto ayudará a que nuestro sitio sea mucho más seguro, al capar de cierta forma las inyecciones sql, aunque seguro que has llegado hasta aquí por otros menesteres. Volviendo al tema, hay varias formas de implementar una validación de longitud de campos con Javascript y en este artículo os las vamos a mostrar con un sencillo ejemplo.

Digamos que tenemos un formulario contacto para clientes de la siguiente forma y queremos comprobar que la longitud del campo dirección, no supere los caracteres que predefinamos.

Método 1 - Limitación básica de longitud

Definimos un array de cadenas en el cual guardaremos todos los ids y los recorremos para ver si la longitud es correcta. Más abajo puedes ver el código:

var fields = [
  "checkout_billing_address_first_name",
  "checkout_billing_address_last_name",
  "checkout_billing_address_company",
  "checkout_billing_address_address1",
  "checkout_billing_address_address2",
  "checkout_billing_address_city",
  "checkout_billing_address_zip",
  "checkout_billing_address_phone"];
for (i = 0; i < fields.length; i++) {
   document.getElementById(fields[i]).maxLength = 35;
}

Con esto conseguiremos limitar la longitud de los campos. Cuando introduzcamos contenido de más de 50 caracteres, no podremos escribir más. Así de simple y sin ningún aviso.

Método 2 - Limitación de longitud con aviso

Si queremos mostrar un mensaje para que el usuario esté al corriente de la limitación, debemos añadir dinámicamente un elemento contenedor (párrafo, capa, span) después del cuadro de texto en el que haya ocurrido la corrección.

Para esto, podemos usar jQuery

$("#checkout_billing_address_address1").after("<p style='color:red'>the max length of 50 characters is reached, you typed in xx characters</p>");

Aquí, usamos after() en vez de append(). Esto es porque append() añade un elemento hijo dentro del elemento contenedor al final del mismo (al igual que appendchild() en Javascript). Si utilizamos after() únicamente añadirá un elemento después del elemento seleccionado. En este caso, vamos a añadir un párrafo después de la caja de texto.

Si lo hacemos con Javascript puro:

var address1 = document.getElementById("checkout_billing_address_address1");
address1.parentNode.innerHTML = address1.parentNode.innerHTML + "<p style='color:red'>the max length of 50 characters is reached, you typed in xx characters</p>";
var maxLength = document.getElementById("maxLength");

El siguiente paso es añadir la lógica de la validación de los 50 caracteres. Si lo hacemos con jQuery sería como el código que te mostramos más abajo:

var Max_Length = 50;
var length = $("#checkout_billing_address_address1").val().length;
if (length > Max_Length) {
  $("#checkout_billing_address_address1").after("<p style='color:red'>the max length of "+Max_Length + " characters is reached, you typed in  " + length + "characters</p>");
}

Sin embargo, si lo hacemos con Javascript puro:

var Max_Length = 50;
var length = document.getElementById("checkout_shipping_address_address1").value.length;
if (length > Max_Length) {
  var address1 = document.getElementById("checkout_billing_address_address1");
  address1.parentNode.innerHTML = address1.parentNode.innerHTML + "<p style='color:red'>the max length of "+Max_Length + " characters is reached, you typed in  " + length + "characters</p>";
}

Por último, activamos el evento onkeyup en la caja de texto. Así comprobaremos, de una manera fiable, la longitud del campo cada vez que haya pulsado una tecla el usuario.

Así sería en jQuery:

$("#checkout_shipping_address_address1").keyup(function(e) {
  checkMaxLength(e);//wrap the maxlength check logic
});

Y así en Javascript:

var address1 = document.getElementById("checkout_shipping_address_address1");
address1.onkeyup = validateMaxLength(e){
  //wrap the maxlength check logic
};

Método 3 - Usar una librería externa para la validación

Existen librerías públicas que puedes utilizar para llevar a cabo la validación de campos, como por ejemplo jQuery Max Length. jQuery Max Length es una librería muy sencilla de utilizar y muy apañada. Para utilizarla, descárgala del sitio oficial e insertala en tu proyecto web. Añade la llamada en tu html para que pueda funcionar tal que así:

<head>
  ...
  <link rel="stylesheet" type="text/css" href="css/jquery.maxlength.css">
  <script type="text/javascript" src="js/jquery.plugin.js"></script>
  <script type="text/javascript" src="js/jquery.maxlength.js"></script>
  ...
</head>

Agrega la función de la limitación de longitud de campos mediante este atributo.

$("#checkout_billing_address_address1").maxlength({max: 50});

Espero que a partir de ahora sepas validar campos con Javascript. Que por nosotros no sea, te hemos mostrado tres métodos distintos para llevarlo a cabo en tus proyectos, cada uno con sus pros y sus contras. Si quieres más artículos como este, indícanoslo en la zona de comentarios de más abajo.