Con Javascript podemos validar los campos de un formulario que un usuario envia en una pagina web antes de que sean enviados y validados en el servidor, reduciendo asi la carga del mismo y mejorando la experiencia de usuario. La validación se lleva a cabo por medio del navegador del lado del cliente, evitando que se envien datos al servidor que contengan errores o no sean validos.
La seguridad en una aplicación es una de las tareas más importantes que un desarrollador debe llevar a cabo en un proyecto web, por lo que antes de validar los campos del lado del cliente, debemos comprobar que la validación es correcta del lado del servidor, una vez comprobado esto, validamos los datos en el lado del cliente.
Lo primero que vamos a necesitar es un formulario con algunos campos, en HTML5 disponemos de un nuevo atributo llamado “required”, que comprueba de forma automática que el campo enviado no está vacio, asi como nuevos tipos de entrada que contrasta los datos con el tipo de <input>, estas nuevas caracteristicas no están disponibles en todos los navegadores y no debemos confiar en que los datos que se envian sean correctos, asi que no vamos a verlos en este articulo.
El formulario
Creamos un documento HTML5 en el que incluiremos las funciones en el <head>, en el cuerpo del documento creamos el formulario
<form name="formulario" onsubmit="return validarFormulario()" method="post">
Nombre:
<input type="text" name="nombre">
<br><br>
Edad:
<input type="text" name="numero">
<br><br>
Sexo:
<select name="sexo">
<option value=""> - Selecciona una opción - </option>
<option value="1">Hombre</option>
<option value="2">Mujer</option>
<option value="3">Otro</option>
</select>
<br><br>
Condiciones de uso:
<br>
Acepto las condiciones de uso <input type="checkbox" name="condicion">
<br><br>
Selecciona una opción de contacto:
<br>
<input type="radio" name="opcForm1" VALUE="Telefono">Telefono
<br>
<input type="radio" name="opcForm2" VALUE="Email" >Email
<br><br>
<input type="submit" value="Enviar">
</form>Validar los campos
Dentro del <head> creamos un script con una función validarFormulario()”“, en ella incluiremos las comprobaciones que vamos a ver a continuación.
Validar el campo nombre
Para validar el campo nombre vamos a crear una función que compruebe varios aspectos de la cadena que vamos a recibir, vamos a validar que el campo no esté vacio, no sea “null” y no sea un valor numerico ( isNaN() ). Además validaremos con una expresión regular que el valor no pueda ser uno o varios espacios en blanco.
var nomForm = document.forms["formulario"]["nombre"].value;
if ( nomForm == null || nomForm == "" || nomForm.length == 0 || /^\s+$/.test(nomForm) || !isNaN(nomForm) ) {
alert("El campo nombre no puede estar vacio");
return false;
}Validar un campo numerico
Los campos numericos como campos de edad, telefono o DNI, son muy sencillos de validar, de nuevo utilizamos isNaN(), para comprobar que el valor es numerico
var numForm = document.forms["formulario"]["numero"].value;
if( isNaN(numForm) || numForm == null || numForm == "" || numForm.length == 0 || /^\s+$/.test(numForm)) {
alert("El campo edad no puede estar vacio y solo puede contener numeros");
return false;
}Validar una opcion de un “select”
Cuando queremos que se seleccione un campo entre varias opciones utilizamos “selectedIndex” para comprobar si hemos recibido algun valor de los campos
var optForm = document.forms["formulario"]["sexo"].selectedIndex;
if( optForm == null || optForm == 0 ) {
alert("Debe seleccionar una opción en el campo 'Sexo'");
return false;
}Validar un Checkbox
En ocasiones necesitamos que un usuario seleccione de forma obligatoria una casilla <checkbox> para por ejemplo aceptar las condiciones del servicio o la politica de privacidad, esto lo hacemos con “checked”
var cdcForm = document.forms["formulario"]["condicion"];
if( !cdcForm.checked ) {
alert("Debe aceptar las condiciones");
return false;
}Validar botones
Mas o menos es lo mismo que ya hemos visto antes estructurado de forma diferente, aquí comprobamos que al menos se haya seleccionado uno de los dos campos.
var opcFormUno = document.forms["formulario"]["opcForm1"];
var opcFormDos = document.forms["formulario"]["opcForm2"];
if ( !opcFormUno.checked & !opcFormDos.checked ) {
alert( "Debe seleccionar Telefono o Email" ) ;
return false;
}Puedes ver y descargar estos ejemplos en mi cuenta de Github.
Seguro que te interesa el articulo Funciones y scripts utiles para validación de formularios en Javascript, en el que puedes encontrar otras funciones útiles como deshabilitar botones o comprobar campos de formularios.
Ricardo 3 septiembre, 2023
excelente material, muchas gracias
Alberto Caifán 1 abril, 2022
buena explicación, justo lo que estaba buscando. Gracias, saludos.
Cascajal 14 agosto, 2021
Muchas gracias. Me ha servido muchísimo este artículo!
No sabía cómo validar un campo <select> de un fotmulario jtml.
Ahora he aprendido gracias a este artículo!