You are on page 1of 20

1 Aprendiendo PHP, parte 18: Validar

formularios
8 octubre, 2013 Ferchu PhpSin comentarios

Cuando hablamos de validaciones de formulario es inevitable pensar en Javascript, y esto tiene mucha
lgica, ya que uno de los motivos por los cuales se ha creado este lenguaje es para evitar el envo de
informacin intil al servidor, sin embargo, siempre hay que tener presente que las validaciones en el
navegador, aunque son necesarias para extender la funcionalidad del frontend, ste puede ser vulnerado
fcilmente, ya que el usuario puede tener Javascript desactivado o bien, puede tener conocimientos
medios de web y saltearse estas validaciones.
Pero las validaciones del backend son una herramienta mucho ms segura, por eso es importante que las
validaciones con PHP, o cualquier otro lenguaje de servidor nunca falten, ya que es el punto fuerte para
evitar la entrada de datos incorrectos por ejemplo en una base de datos.
En esta ocasin veremos un sencillo ejemplo. As que vamos a crear una nueva carpeta dentro de htdocs
llamada validaciones. Crearemos un archivo llamado index.php y otro llamado validado.php y a la
misma altura una carpeta llamada funciones que dentro tendr otro archivo llamado validaciones.php.
Dentro del archivo index.php vamos a copiar el siguiente cdigo:
<!DOCTYPE>
<html>
<head>
<title> Formulario </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form method="post" action="index.php">
<label> Nombre </label>

<br />
<input type="text" name="nombre" />
<br />
<label> Edad </label>
<br />
<input type="text" name="edad" size="3" />
<br />
<label> E-mail </label>
<br />
<input type="text" name="email" />
<br />
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Y dentro de validado.php lo siguiente:


<!DOCTYPE>
<html>
<head>
<title> Formulario </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<strong> Sus datos han sido enviados correctamente </strong>
</body>
</html>

Este ltimo no tendr mucha lgica, ser simplemente un mensaje de que el formulario ha sido validado
correctamente.
Con respecto al anterior, al archivo index.php, como se ve en el ejemplo ser un simple formulario con
tres campos para el nombre, la edad y la direccin de e-mail, algo sencillo que a estas alturas te debera
resultar familiar.
Ahora, el asunto es as, cuando se enve el formulario deben validarse tres cosas: por empezar que el
campo nombre no debe estar vaco, el campo de la edad debe ser un nmero entero y finalmente la
direccin de e-mail debe tener un formato vlido.

As que vamos dentro de la carpeta funciones al archivo validaciones.php y crear las tres funciones
correspondientes.
Empecemos por la validaciones del campo requerido, podramos tener una funcin con este aspecto:
function validaRequerido($valor){
if($valor == ''){
return false;
}else{
return true;
}
}

La misma recibir un valor que ser justamente lo que ingres el usuario, preguntar si ste son comillas
vacas, osea si no ingres nada, y de ser as devolver false, de lo contrario devolver true, osea que est
validado.
Ahora bien, esto tiene un pequeo problema, y es que si el usuario ingresa un campo sin llenar llegar al
servidor una variable como sta:
$nombre = '';

Pero tambin el usuario podra meter espacios y no escribir nada ms:


$nombre = ' ';

(Notar el espacio dentro de las comillas)


Ac la validacin fallar porque nuestra funcin pregunta si es comillas-comillas, y no comillas-espaciocomillas. Entonces para solucionar este problema usaremos la funcintrim() que eliminar las comillas de
adelante y atrs. As que vamos a reemplazar la funcin por:
function validaRequerido($valor){
if(trim($valor) == ''){
return false;
}else{
return true;
}
}

Bueno, seguimos. Vamos a crear la validacin para la edad, ste debe ser un nmero entero, as que
vamos a usar una funcin que no habamos visto hasta ahora que es la funcin filter_var(). sta recibir
tres parmetros, el primero ser el valor a validar o filtrar, el segundo el tipo de validacin y el tercero

ser un array con reglas opcionales. ste ltimo vamos a omitirlo momentneamente. Esta funcin nos
devolver el valor que le pasamos, pero si ste no es vlido entonces ser FALSE:
function validarEntero($valor){
if(filter_var($valor, FILTER_VALIDATE_INT) === FALSE){
return false;
}else{
return true;
}
}

Si te has fijado bien, el segundo parmetro que le hemos pasado a la funcin es una constante propia de
PHP llamada FILTER_VALIDATE_INT, osea para los nmeros enteros. Aunque esta validacin no
est completa, ya que la funcin va a validar que el valor que ingresen sea un entero, pero no tiene un
rango, osea si el usuario pone que tiene 500 aos, esto obviamente es incorrecto. Bueno, como dijimos
antes la funcin filter_var()tiene un tercer parmetro opcional que es un array con filtros, as que vamos a
modificar nuestra funcin por esto:
function validarEntero($valor, $opciones=null){
if(filter_var($valor, FILTER_VALIDATE_INT, $opciones) === FALSE){
return false;
}else{
return true;
}
}

Como se ve, la funcin validarEntero() pasamos un segundo parmetro opcional que se pasar
a filter_var(), este parmetro si lo salteamos ser null y no se tendr en cuenta.
Y finalmente una funcin para validar el email en donde tambin usaremos la funcin de
PHP filter_var() slo que en esta ocasin en lugar de
usar FILTER_VALIDATE_INTusaremos FILTER_VALIDATE_EMAIL:
function validaEmail($valor){
if(filter_var($valor, FILTER_VALIDATE_EMAIL) === FALSE){
return false;
}else{
return true;
}

Finalmente nuestro archivo validaciones.php quedar as:


<?php
function validaRequerido($valor){
if(trim($valor) == ''){
return false;
}else{
return true;
}
}
function validarEntero($valor, $opciones=null){
if(filter_var($valor, FILTER_VALIDATE_INT, $opciones) === FALSE){
return false;
}else{
return true;
}
}
function validaEmail($valor){
if(filter_var($valor, FILTER_VALIDATE_EMAIL) === FALSE){
return false;
}else{
return true;
}
}
?>

Y ahora vamos a volver al archivo index.php para editar la cabecera:


<?php
//Definimos la codificacin de la cabecera.
header('Content-Type: text/html; charset=utf-8');
//Importamos el archivo con las validaciones.
require_once 'funciones/validaciones.php';
//Guarda los valores de los campos en variables, siempre y cuando se haya
enviado el formulario, sino se guardar null.
$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : null;

$edad = isset($_POST['edad']) ? $_POST['edad'] : null;


$email = isset($_POST['email']) ? $_POST['email'] : null;
//Este array guardar los errores de validacin que surjan.
$errores = array();
//Pregunta si est llegando una peticin por POST, lo que significa que el
usuario envi el formulario.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//Valida que el campo nombre no est vaco.
if (!validaRequerido($nombre)) {
$errores[] = 'El campo nombre es incorrecto.';
}
//Valida la edad con un rango de 3 a 130 aos.
$opciones_edad = array(
'options' => array(
//Definimos el rango de edad entre 3 a 130.
'min_range' => 3,
'max_range' => 130
)
);
if (!validarEntero($edad, $opciones_edad)) {
$errores[] = 'El campo edad es incorrecto.';
}
//Valida que el campo email sea correcto.
if (!validaEmail($email)) {
$errores[] = 'El campo email es incorrecto.';
}
//Verifica si ha encontrado errores y de no haber redirige a la pgina con
el mensaje de que pas la validacin.
if(!$errores){
header('Location: validado.php');
exit;
}
}
?>

Ahora vamos a explicar las lneas:

header('Content-Type: text/html; charset=utf-8');

Definimos el formato, nada nuevo.


require_once 'funciones/validaciones.php';

Importamos el archivo con las validaciones.


$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : null;
$edad = isset($_POST['edad']) ? $_POST['edad'] : null;
$email = isset($_POST['email']) ? $_POST['email'] : null;

Estas variables guardarn los valores que ha enviado el usuario si es que ha enviado el formulario, sino se
guardar null.
$errores = array();

Esta array guardar los errores de validacin si es que hay. Luego nos servir para verificar si el
formulario est correcto.
if ($_SERVER['REQUEST_METHOD'] == 'POST')

Verificamos si el usuario ha enviado el formulario, osea que la peticin est llegando por POST. Dentro
de este if vamos a validar que los campos estn correctos.
//Valida que el campo nombre no est vaco.
if (!validaRequerido($nombre)) {
$errores[] = 'El campo nombre es incorrecto.';
}
//Valida la edad con un rango de 3 a 130 aos.
$opciones_edad = array(
'options' => array(
//Definimos el rango de edad entre 3 a 130.
'min_range' => 3,
'max_range' => 130
)
);
if (!validarEntero($edad, $opciones_edad)) {
$errores[] = 'El campo edad es incorrecto.';
}
//Valida que el campo email sea correcto.
if (!validaEmail($email)) {

$errores[] = 'El campo email es incorrecto.';


}

Aqu validamos los valores que ha enviado el formulario preguntando en cada validacin si da false, de
ser as guardamos un nuevo error de validacin dentro de el array $errores.
Notar esta lnea:
$opciones_edad = array(
'options' => array(
//Definimos el rango de edad entre 3 a 130.
'min_range' => 3,
'max_range' => 130
)
);

Definimos el mnimo y mximo de rango, osea que la edad est entre 3 y 130 aos.
if(!$errores){
header('Location: validado.php');
exit;
}

Preguntamos si el array $errores est vaco, de ser as significa que no tienen errores (claro est), osea
que el formulario est validado y redireccionamos con la funcin header()a la pgina validado.php. Con
respecto a la funcin exit est nos permite finalizar el script, osea que todo lo que siga por delante ser
omitido.
Ahora, si el array $errores no est vaco, osea que hay errores, debemos mostrar los mismos dentro del
cdigo html:
<?php if ($errores): ?>
<ul style="color: #f00;">
<?php foreach ($errores as $error): ?>
<li> <?php echo $error ?> </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>

Aqu preguntamos si hay errores, y de haberlos los mostramos recorriendo el array$errores y los
mostramos con una lista.

El cdigo finalmente quedar as:


<?php
//Definimos la codificacin de la cabecera.
header('Content-Type: text/html; charset=utf-8');
//Importamos el archivo con las validaciones.
require_once 'funciones/validaciones.php';
//Guarda los valores de los campos en variables, siempre y cuando se haya
enviado el formulario, sino se guardar null.
$nombre = isset($_POST['nombre']) ? $_POST['nombre'] : null;
$edad = isset($_POST['edad']) ? $_POST['edad'] : null;
$email = isset($_POST['email']) ? $_POST['email'] : null;
//Este array guardar los errores de validacin que surjan.
$errores = array();
//Pregunta si est llegando una peticin por POST, lo que significa que el
usuario envi el formulario.
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
//Valida que el campo nombre no est vaco.
if (!validaRequerido($nombre)) {
$errores[] = 'El campo nombre es incorrecto.';
}
//Valida la edad con un rango de 3 a 130 aos.
$opciones_edad = array(
'options' => array(
//Definimos el rango de edad entre 3 a 130.
'min_range' => 3,
'max_range' => 130
)
);
if (!validarEntero($edad, $opciones_edad)) {
$errores[] = 'El campo edad es incorrecto.';
}
//Valida que el campo email sea correcto.
if (!validaEmail($email)) {
$errores[] = 'El campo email es incorrecto.';
}

//Verifica si ha encontrado errores y de no haber redirige a la pgina con


el mensaje de que pas la validacin.
if(!$errores){
header('Location: validado.php');
exit;
}
}
?>
<!DOCTYPE>
<html>
<head>
<title> Formulario </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<?php if ($errores): ?>
<ul style="color: #f00;">
<?php foreach ($errores as $error): ?>
<li> <?php echo $error ?> </li>
<?php endforeach; ?>
</ul>
<?php endif; ?>
<form method="post" action="index.php">
<label> Nombre </label>
<br />
<input type="text" name="nombre" value="<?php echo $nombre ?>" />
<br />
<label> Edad </label>
<br />
<input type="text" name="edad" size="3" value="<?php echo $edad ?>" />
<br />
<label> E-mail </label>
<br />
<input type="text" name="email" value="<?php echo $email ?>" />
<br />
<input type="submit" value="Enviar" />

</form>
</body>
</html>

7.3. Validacin

La principal utilidad de JavaScript en el manejo de los formularios es la validacin de


los datos introducidos por los usuarios. Antes de enviar un formulario al servidor, se
recomienda validar mediante JavaScript los datos insertados por el usuario. De esta
forma, si el usuario ha cometido algn error al rellenar el formulario, se le puede
notificar de forma instantnea, sin necesidad de esperar la respuesta del servidor.
Notificar los errores de forma inmediata mediante JavaScript mejora la satisfaccin del
usuario con la aplicacin (lo que tcnicamente se conoce como "mejorar la experiencia
de usuario") y ayuda a reducir la carga de procesamiento en el servidor.
Normalmente, la validacin de un formulario consiste en llamar a una funcin de
validacin cuando el usuario pulsa sobre el botn de envo del formulario. En esta
funcin, se comprueban si los valores que ha introducido el usuario cumplen las
restricciones impuestas por la aplicacin.
Aunque existen tantas posibles comprobaciones como elementos de formulario
diferentes, algunas comprobaciones son muy habituales: que se rellene un campo
obligatorio, que se seleccione el valor de una lista desplegable, que la direccin de
email indicada sea correcta, que la fecha introducida sea lgica, que se haya
introducido un nmero donde as se requiere, etc.
A continuacin se muestra el cdigo JavaScript bsico necesario para incorporar la
validacin a un formulario:
<form action="" method="" id="" name="" onsubmit="return validacion()">
...
</form>

Y el esquema de la funcin validacion() es el siguiente:


function validacion() {

if (condicion que debe cumplir el primer campo del formulario) {


// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
else if (condicion que debe cumplir el segundo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}
...
else if (condicion que debe cumplir el ltimo campo del formulario) {
// Si no se cumple la condicion...
alert('[ERROR] El campo debe tener un valor de...');
return false;
}

// Si el script ha llegado a este punto, todas las condiciones


// se han cumplido, por lo que se devuelve el valor true
return true;
}

El funcionamiento de esta tcnica de validacin se basa en el comportamiento del


evento onsubmit de JavaScript. Al igual que otros eventos como onclick y onkeypress,
el evento 'onsubmit vara su comportamiento en funcin del valor que se devuelve.
As, si el evento onsubmit devuelve el valor true, el formulario se enva como lo hara
normalmente. Sin embargo, si el evento onsubmit devuelve el valor false, el formulario
no se enva. La clave de esta tcnica consiste en comprobar todos y cada uno de los

elementos del formulario. En cuando se encuentra un elemento incorrecto, se devuelve


el valor false. Si no se encuentra ningn error, se devuelve el valor true.
Por lo tanto, en primer lugar se define el evento onsubmit del formulario como:
onsubmit="return validacion()"

Como el cdigo JavaScript devuelve el valor resultante de la funcin validacion(), el


formulario solamente se enviar al servidor si esa funcin devuelve true. En el caso de
que la funcinvalidacion() devuelva false, el formulario permanecer sin enviarse.
Dentro de la funcin validacion() se comprueban todas las condiciones impuestas
por la aplicacin. Cuando no se cumple una condicin, se devuelve false y por tanto
el formulario no se enva. Si se llega al final de la funcin, todas las condiciones se han
cumplido correctamente, por lo que se devuelve true y el formulario se enva.
La notificacin de los errores cometidos depende del diseo de cada aplicacin. En el
cdigo del ejemplo anterior simplemente se muestran mensajes mediante la
funcin alert() indicando el error producido. Las aplicaciones web mejor diseadas
muestran cada mensaje de error al lado del elemento de formulario correspondiente y
tambin suelen mostrar un mensaje principal indicando que el formulario contiene
errores.
Una vez definido el esquema de la funcin validacion(), se debe aadir a esta funcin
el cdigo correspondiente a todas las comprobaciones que se realizan sobre los
elementos del formulario. A continuacin, se muestran algunas de las validaciones
ms habituales de los campos de formulario.

7.3.1. Validar un campo de texto obligatorio

Se trata de forzar al usuario a introducir un valor en un cuadro de texto o textarea en


los que sea obligatorio. La condicin en JavaScript se puede indicar como:
valor = document.getElementById("campo").value;
if( valor == null || valor.length == 0 || /^\s+$/.test(valor) ) {
return false;
}

Para que se de por completado un campo de texto obligatorio, se comprueba que el


valor introducido sea vlido, que el nmero de caracteres introducido sea mayor que
cero y que no se hayan introducido slo espacios en blanco.
La palabra reservada null es un valor especial que se utiliza para indicar "ningn
valor". Si el valor de una variable es null, la variable no contiene ningn valor de tipo
objeto, array, numrico, cadena de texto o booleano.
La segunda parte de la condicin obliga a que el texto introducido tenga una longitud
superior a cero caracteres, esto es, que no sea un texto vaco.
Por ltimo, la tercera parte de la condicin (/^\s+$/.test(valor)) obliga a que el valor
introducido por el usuario no slo est formado por espacios en blanco. Esta
comprobacin se basa en el uso de"expresiones regulares", un recurso habitual en
cualquier lenguaje de programacin pero que por su gran complejidad no se van a
estudiar. Por lo tanto, slo es necesario copiar literalmente esta condicin, poniendo
especial cuidado en no modificar ningn carcter de la expresin.

7.3.2. Validar un campo de texto con valores numricos

Se trata de obligar al usuario a introducir un valor numrico en un cuadro de texto. La


condicin JavaScript consiste en:
valor = document.getElementById("campo").value;
if( isNaN(valor) ) {
return false;
}

Si el contenido de la variable valor no es un nmero vlido, no se cumple la condicin.


La ventaja de utilizar la funcin interna isNaN() es que simplifica las comprobaciones,
ya que JavaScript se encarga de tener en cuenta los decimales, signos, etc.
A continuacin se muestran algunos resultados de la funcin isNaN():
isNaN(3);

// false

isNaN("3");

// false

isNaN(3.3545);

// false

isNaN(32323.345);

// false

isNaN(+23.2);

// false

isNaN("-23.2");

// false

isNaN("23a");

// true

isNaN("23.43.54"); // true

7.3.3. Validar que se ha seleccionado una opcin de una lista

Se trata de obligar al usuario a seleccionar un elemento de una lista desplegable. El


siguiente cdigo JavaScript permite conseguirlo:
indice = document.getElementById("opciones").selectedIndex;
if( indice == null || indice == 0 ) {
return false;
}

<select id="opciones" name="opciones">


<option value="">- Selecciona un valor -</option>
<option value="1">Primer valor</option>
<option value="2">Segundo valor</option>
<option value="3">Tercer valor</option>
</select>

A partir de la propiedad selectedIndex, se comprueba si el ndice de la opcin


seleccionada es vlido y adems es distinto de cero. La primera opcin de la lista (Selecciona un valor ) no es vlida, por lo que no se permite el valor 0 para esta

propiedad selectedIndex.

7.3.4. Validar una direccin de email

Se trata de obligar al usuario a introducir una direccin de email con un formato vlido.
Por tanto, lo que se comprueba es que la direccin parezca vlida, ya que no se

comprueba si se trata de una cuenta de correo electrnico real y operativa. La


condicin JavaScript consiste en:
valor = document.getElementById("campo").value;
if( !(/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)/.test(valor)) ) {
return false;
}

La comprobacin se realiza nuevamente mediante las expresiones regulares, ya que


las direcciones de correo electrnico vlidas pueden ser muy diferentes. Por otra
parte, como el estndar que define el formato de las direcciones de correo electrnico
es muy complejo, la expresin regular anterior es una simplificacin. Aunque esta regla
valida la mayora de direcciones de correo electrnico utilizadas por los usuarios, no
soporta todos los diferentes formatos vlidos de email.

7.3.5. Validar una fecha

Las fechas suelen ser los campos de formulario ms complicados de validar por la
multitud de formas diferentes en las que se pueden introducir. El siguiente cdigo
asume que de alguna forma se ha obtenido el ao, el mes y el da introducidos por el
usuario:
var ano = document.getElementById("ano").value;
var mes = document.getElementById("mes").value;
var dia = document.getElementById("dia").value;

valor = new Date(ano, mes, dia);

if( !isNaN(valor) ) {
return false;
}

La funcin Date(ano, mes, dia) es una funcin interna de JavaScript que permite
construir fechas a partir del ao, el mes y el da de la fecha. Es muy importante tener
en cuenta que el nmero de mes se indica de 0 a 11, siendo 0 el mes de Enero y 11 el

mes de Diciembre. Los das del mes siguen una numeracin diferente, ya que el
mnimo permitido es 1 y el mximo 31.
La validacin consiste en intentar construir una fecha con los datos proporcionados
por el usuario. Si los datos del usuario no son correctos, la fecha no se puede construir
correctamente y por tanto la validacin del formulario no ser correcta.

7.3.6. Validar un nmero de DNI

Se trata de comprobar que el nmero proporcionado por el usuario se corresponde


con un nmero vlido de Documento Nacional de Identidad o DNI. Aunque para cada
pas o regin los requisitos del documento de identidad de las personas pueden variar,
a continuacin se muestra un ejemplo genrico fcilmente adaptable. La validacin no
slo debe comprobar que el nmero est formado por ocho cifras y una letra, sino que
tambin es necesario comprobar que la letra indicada es correcta para el nmero
introducido:
valor = document.getElementById("campo").value;
var letras = ['T', 'R', 'W', 'A', 'G', 'M', 'Y', 'F', 'P', 'D', 'X', 'B', 'N', 'J
', 'Z', 'S', 'Q', 'V', 'H', 'L', 'C', 'K', 'E', 'T'];

if( !(/^\d{8}[A-Z]$/.test(valor)) ) {
return false;
}

if(valor.charAt(8) != letras[(valor.substring(0, 8))%23]) {


return false;
}

La primera comprobacin asegura que el formato del nmero introducido es el


correcto, es decir, que est formado por 8 nmeros seguidos y una letra. Si la letra
est al principio de los nmeros, la comprobacin sera /^[A-Z]\d{8}$/. Si en vez de
ocho nmeros y una letra, se requieren diez nmeros y dos letras, la comprobacin
sera /^\d{10}[A-Z]{2}$/ y as sucesivamente.

La segunda comprobacin aplica el algoritmo de clculo de la letra del DNI y la


compara con la letra proporcionada por el usuario. El algoritmo de cada documento de
identificacin es diferente, por lo que esta parte de la validacin se debe adaptar
convenientemente.

7.3.7. Validar un nmero de telfono

Los nmeros de telfono pueden ser indicados de formas muy diferentes: con prefijo
nacional, con prefijo internacional, agrupado por pares, separando los nmeros con
guiones, etc.
El siguiente script considera que un nmero de telfono est formado por nueve
dgitos consecutivos y sin espacios ni guiones entre las cifras:
valor = document.getElementById("campo").value;
if( !(/^\d{9}$/.test(valor)) ) {
return false;
}

Una vez ms, la condicin de JavaScript se basa en el uso de expresiones regulares,


que comprueban si el valor indicado es una sucesin de nueve nmeros consecutivos.
A continuacin se muestran otras expresiones regulares que se pueden utilizar para
otros formatos de nmero de telfono:

Nmero

Expresin regular

Formato

900900900

/^\d{9}$/

9 cifras seguidas

900-900900

/^\d{3}-\d{3}-\d{3}$/

9 cifras agrupadas de 3 en 3 y separadas


por guiones

900 900900

/^\d{3}\s\d{6}$/

9 cifras, las 3 primeras separadas por un


espacio

Nmero

Expresin regular

Formato

900 90 09
00

/^\d{3}\s\d{2}\s\d{2}\s\d{2}$/

9 cifras, las 3 primeras separadas por un


espacio, las siguientes agrupadas de 2 en
2

(900)
900900

/^\(\d{3}\)\s\d{6}$/

9 cifras, las 3 primeras encerradas por


parntesis y un espacio de separacin
respecto del resto

+34
900900900

/^\+\d{2,3}\s\d{9}$/

Prefijo internacional (+ seguido de 2 o 3


cifras), espacio en blanco y 9 cifras
consecutivas

10

7.3.8. Validar que un checkbox ha sido seleccionado

Si un elemento de tipo checkbox se debe seleccionar de forma obligatoria, JavaScript


permite comprobarlo de forma muy sencilla:
elemento = document.getElementById("campo");
if( !elemento.checked ) {
return false;
}

Si se trata de comprobar que todos los checkbox del formulario han sido
seleccionados, es ms fcil utilizar un bucle:
formulario = document.getElementById("formulario");
for(var i=0; i<formulario.elements.length; i++) {
var elemento = formulario.elements[i];
if(elemento.type == "checkbox") {
if(!elemento.checked) {

return false;
}
}
}

11

7.3.9. Validar que un radiobutton ha sido seleccionado

Aunque se trata de un caso similar al de los checkbox, la validacin de


los radiobutton presenta una diferencia importante: en general, la comprobacin que
se realiza es que el usuario haya seleccionado algn radiobutton de los que forman un
determinado grupo. Mediante JavaScript, es sencillo determinar si se ha seleccionado
algn radiobutton de un grupo:
opciones = document.getElementsByName("opciones");

var seleccionado = false;


for(var i=0; i<opciones.length; i++) {
if(opciones[i].checked) {
seleccionado = true;
break;
}
}

if(!seleccionado) {
return false;
}

El anterior ejemplo recorre todos los radiobutton que forman un grupo y comprueba
elemento por elemento si ha sido seleccionado. Cuando se encuentra el
primer radiobutton seleccionado, se sale del bucle y se indica que al menos uno ha
sido seleccionado.