<!-- 5.1-1. Crear un formulario que validen todos los campos. Ninguno puede quedar
en blanco y todos deben ajustarse al tipo de dato que contienen. Informa al usuario
de los posibles errores en cuanto salga de un campo para entrar en otro y también
cuando pulse el botón Validar. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Validación de un formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript">
function valida(f) {
var ok = true;
var msg = "Debes escribir algo en los campos:\n";
if(f.txtNombre.value == ""){
msg += "- Nombre\n";
ok = false;
}
if(f.txtPApellido.value == ""){
msg += "- Primer Apellido\n";
ok = false;
}
if(f.txtMail.value == ""){
msg += "- E-Mail\n";
ok = false;
}
if(f.txtDireccion.value == ""){
msg += "- Dirección\n";
ok = false;
}
if(f.txtPoblacion.value == ""){
msg += "- Población\n";
ok = false;
}
/*
if(f.txtProvincia.value == ""){
msg += "- Provincia\n";
ok = false;
}*/
indice = f.txtProvincia.selectedIndex; //indice = document.getElementById("txtProvincia").selectedIndex;
if( indice == null || indice == 0 ) {
msg += "- Provincia\n";
ok = false;
}
//Checkbox
var marcados=0;
if(document.getElementById('CbTodos').checked){
marcados++;
}
if(document.getElementById('UpSemana').checked){
marcados++;
}
if(document.getElementById('UpMes').checked){
marcados++;
}
if(document.getElementById('UpAnio').checked){
marcados++;
}
if( marcados==0) {
msg += "- Checkbox\n";
ok = false;
}
//Radio Button para control de estado civil
opciones=document.getElementsByName("RbECivil");
var rmarcado=false;
for(var i=0; i<opciones.length;i++){
if(opciones[i].checked){
rmarcado=true;
//break;
}
}
if(!rmarcado){
msg += "- RadioButton\n";
ok = false;
//return false;
}
//Salida
if(ok == false)
alert(msg);
return ok;
}
</script>
</head>
<body>
<form name="form1" id="form1" action="#" method="post" onsubmit="return valida(this)">
<TABLE border="0">
<tr>
<td><label for="txtNombre">Nombre(*):</label></td>
<td><input type="text" name="txtNombre" id="txtNombre" size="20"/></td>
</tr>
<tr>
<td><label for="txtPApellidos">Primer Apellido(*):</label></td>
<td><input type="text" name="txtPApellido" id="txtPApellido" size="20"/></td>
</tr>
<tr>
<td><label for="txtMail">E-Mail(*):</label></td>
<td><input type="text" name="txtMail" id="txtMail"/></td>
</tr>
<tr>
<td><label for="txtDireccion">Dirección(*):</label></td>
<td><input type="text" name="txtDireccion" id="txtDireccion" size="20"/></td>
</tr>
<tr>
<td><label for="txtPoblacion">Población(*):</label></td>
<td><input type="text" name="txtPoblacion" id="txtPoblacion" size="20"/></td>
</tr>
<tr>
<td><label for="txtProvincia">Provincia(*):</label></td>
<td><select name="txtProvincia" id="txtProvincia"/>
<option value="">- Seleccione una provincia -</option>
<option value="1">Álava</option>
<option value="2">Albacete</option>
<option value="3">Alicante</option>
<option value="4">Almeria</option>
<option value="5">Asturias</option>
<option value="6">Ávila</option>
<option value="7">Badajoz</option>
<option value="8">Barcelona</option>
<option value="9">Burgos</option>
<option value="10">Cáceres</option>
<option value="11">Cádiz</option>
<option value="12">Cantabria</option>
<option value="13">Castellón</option>
<option value="14">Ciudad Real</option>
<option value="15">Córdoba</option>
<option value="16">Cuenca</option>
<option value="17">Gerona</option>
<option value="18">Granada</option>
<option value="19">Guadalajara</option>
<option value="20">Guipúzcoa</option>
<option value="21">Huelva</option>
<option value="22">Huesca</option>
<option value="23">Islas Baleares</option>
<option value="24">Jaén</option>
<option value="25">La Coruña</option>
<option value="26">La Rioja</option>
<option value="27">Las Palmas</option>
<option value="28">León</option>
<option value="29">Lérida</option>
<option value="30">Lugo</option>
<option value="31">Madrid</option>
<option value="32">Málaga</option>
<option value="33">Murcia</option>
<option value="34">Navarra</option>
<option value="35">Orense</option>
<option value="36">Palencia</option>
<option value="37">Pontevedra</option>
<option value="38">Salamanca</option>
<option value="39">Segovia</option>
<option value="40">Sevilla</option>
<option value="41">Soria</option>
<option value="42">Tarragona</option>
<option value="37">Santa Cruz de Tenerife</option>
<option value="37">Teruel</option>
<option value="37">Toledo</option>
<option value="37">Valencia</option>
<option value="37">Valladoliz</option>
<option value="37">Vizcaya</option>
<option value="37">Zamora</option>
<option value="37">Zaragoza</option>
</select>
</td>
</tr>
<tr>
<td rowspan="2"><label for="RbECivil">Estado Civil(*):</label></td>
<td>
<input type="radio" name="RbECivil" id="Solteroa" value="Soltero/a"/>
<label for="Soltero">Soltero/a</label>
</td>
</tr>
<tr>
<td><input type="radio" name="RbECivil" id="casado" value="Casado/a"/>
<label for="Casado">Casado/a</label></td>
</tr>
<tr>
<td rowspan="4"><label for="NConexion">Cada cuanto te conectas?(*):</label></td>
<td>
<input type="checkbox" name="CbTodos" id="CbTodos"/>
<label for="CbTodos">Todos los dias</label>
</td>
</tr>
<tr>
<td><input type="checkbox" name="UpSemana" id="UpSemana"/>
<label for="UpSemana">Un par de veces por semana</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpMes" id="UpMes"/>
<label for="UpMes">Un par de veces por mes</label></td>
</tr>
<tr>
<td><input type="checkbox" name="UpAnio" id="UpAnio"/>
<label for="UpAnio">Un par de veces por año</label></td>
</tr>
</TABLE>
<input type="submit" name="btnEnviar" id="btnEnviar" value="Enviar >>"/></br>
<input type="reset" value="Borrar" />
</form>
</body>
</html>
No hay comentarios:
Publicar un comentario