Cuando insertamos un formulario en una página web, antes de enviar los datos al servidor primeramente debemos comprobar si el usuario los ha insertado correctamente. A esto se llama validar en cliente.
Algunas de las cosas que más usualmente nos veremos en situación de tener que comprobar son:
- Se han insertado valores en todos los campos obligatorios, comprobando si realmente se han introducido sólo espacios.
- Los campos que debieran contener sólo letras y/o espacios contienen dígitos u otros caracteres no deseados.
- Los campos que debieran contener sólo dígitos contienen letras, u otros caracteres no deseados.
- Los campos con un formato predeterminado (teléfono, fecha, hora, E-Mail, NIF, etc.) han sido introducidos en el formato correcto.
El formulario dispone de un evento onsubmit con el cual podemos controlar si el usuario ha intentado enviarlo, pudiendo así comprobar si los datos son correctos (y en caso de no serlo, cancelar el envío).
Fíjate también en la sentencia return al definir onsubmit.
Si onsubmit recibe 'true' se enviará el formulario al servidor web, mientras que si recibe 'false' se cancelará el envío.
<html>
<head>
<title>Curso de JavaScript</title>
<script language="JavaScript">
function validar()
{
var ok = true;
if( document.getElementById("txt1").value == "" || document.getElementById("txt2").value == "" )
{
alert("Introduzca todos los datos");
ok = false;
}
return ok;
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="form1.php" onsubmit="return validar();">
Nombre: <input type="text" id="txt1" name="txt1" />
Apellidos: <input type="text" id="txt2" name="txt2" />
<input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar" />
</form>
</body>
</html>
Explicación: Al hacer clic en el botón para enviar el formulario se procesará la función validar(), que comprobará si se han introducido valores en los cuadros de texto: de ser así devolverá 'true' y se enviarán los datos al servidor, en el cual se procesará el archivo 'form1.php' (que debería volver a validarlos antes de procesarlos).
Si en los campos del formulario no se introdujo nada, la función validar() mostrará un mensaje y devolverá 'false', cancelándose el envío del mismo.
Para que el ejemplo anterior funcione según lo esperado, deberíamos comprobar también si se han introducido sólo espacios.
Vea también: [ Formularios en HTML ]
Podemos acceder a un formulario a través del Objeto Form() que hace referencia a él, y que dispone de las siguientes propiedades:
- action: devuelve o establece el valor del atributo HTML del mismo nombre.
- enctype: devuelve o establece el valor del atributo HTML del mismo nombre.
- length: devuelve el número de componentes que hay en el formulario.
- method: devuelve o establece el valor del atributo HTML del mismo nombre.
- name: devuelve o establece el valor del atributo HTML del mismo nombre
- target: devuelve o establece el valor del atributo HTML del mismo nombre.
También tiene los métodos:
- reset(): resetea los valores de los componentes del formulario (volver a asignarles el valor que tenían definido inicialmente en el atributo HTML value).
- submit(): enviar el formulario.
Aparte del evento onsubmit() que hemos explicado en la sección anterior, también disponemos de onreset(), que se produce al resetear el valor de sus componentes.
Asimismo disponen también de la Colección elements[], que devuelve un array con los componentes del formulario.
Vea también: [ Formularios en HTML ]
Relacionado: [ Propiedades genéricas del DOM en JavaScript ]
Los componentes de tipo botón, así como el campo oculto o hidden comparten las siguientes propiedades:
- form: referencia al formulario en el que se encuentra el componente.
- name: nombre del componente (el mismo que el atributo HTML name).
- type: tipo de componente (el mismo que el atributo HTML type).
- value: valor del componente (el mismo que el atributo HTML value).
Vea también: [ Botones en HTML ] - [ Input Hidden en HTML ]
Relacionado: [ Propiedades genéricas del DOM en JavaScript ]
Los componentes <input> de tipo checkbox y radio tienen las siguientes propiedades:
- checked: devuelve información sobre si el componente está marcado, o bien lo marca o desmarca (hace referencia al atributo HTML del mismo nombre).
- defaultChecked: indica si el estado por defecto del componente es marcado (true) o no (false).
- form: referencia al formulario en el que se encuentra el componente.
- name: nombre del componente (el mismo que el atributo HTML name).
- type: tipo del componente (el mismo que el atributo HTML type).
- value: valor del componente (el mismo que el atributo HTML value).
Como ya sabrás, los botones de tipo radio se agrupan con un mismo atributo HTML name. En el siguiente ejemplo te mostramos cómo podemos comprobar si se ha seleccionado algún elemento:
<html>
<head>
<title>Curso de JavaScript</title>
<script language="JavaScript">
function comprobarSeleccionado()
{
var aRadios = document.getElementsByName("grupo1");
var radioActivo = null;
for( var contador=0; contador < aRadios.length; contador++ )
{
if( aRadios[contador].checked == true )
radioActivo = aRadios[contador].value;
}
if( radioActivo == null )
alert("Selecciona un radio button");
else
alert("radio: " + radioActivo);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="#" >
<label for="opc11">Opción 1A</label>
<input type="radio" id="opc11" name="grupo1" value="OPCION_1A" />
<label for="opc12">Opción 1B</label>
<input type="radio" id="opc12" name="grupo1" value="OPCION_1B"/>
<label for="opc13">Opción 1C</label>
<input type="radio" id="opc13" name="grupo1" value="OPCION_1C" /><hr/>
<input type="reset" />
<input type="button" id="btnComprobar" name="btnComprobar" value="Comprobar seleccionados" onclick="comprobarSeleccionado();" />
</form>
</body>
</html>
Explicación: con getElementsByName() obtenemos un array con los componentes de tipo radio agrupados bajo el nombre 'grupo1', y luego lo recorremos para comprobar si alguno de los elementos tiene la propiedad checked con valor 'true' (marcado).
Vea también: [ Input Checkbox en HTML ] - [ Input Radio en HTML ]
Vea también: [ Propiedades genéricas del DOM en JavaScript ]
