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.

Valoraciones


Sé el primero en valorar

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias y de terceros para personalizar el contenido y los anuncios, ofrecer funciones de medios sociales y analizar el tráfico. Además compartimos información sobre el uso que haces de nuestra web con nuestros partners de medios sociales, de publicidad y de análisis web. Si continúas navegando estás dando tu consentimiento para la aceptación de nuestra Política de cookies.

ACEPTAR
Aviso de cookies