<!-- 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>
Mostrando entradas con la etiqueta opciones. Mostrar todas las entradas
Mostrando entradas con la etiqueta opciones. Mostrar todas las entradas
martes, 21 de marzo de 2017
Formulario con menú que se despliega
<!DOCTYPE>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
<html lang='es'>
<head>
<title>Formulario con despliegue de recuadro. Ejercicio 3.25</title>
<meta charset='UTF-8'/>
<meta name='description' content='Página web'>
<meta name='keywords' content=',javascript, ejemplo, html'>
<script type="text/javascript">
function comprobarYEnviar(){
textNombre=document.getElementById("textNombre");
if(textNombre.value.length>0){
var regExpNumero=/\d+/;
textNumero=document.getElementById("textNumero");
if(regExpNumero.test(textNumero.value)){
var regExpEMail=/\w+@\w+.\w+/;
textEMail=document.getElementById("textEMail");
if (regExpEMail.test(textEMail.value)){
selectLista=document.getElementById("selectListado");
if (selectLista.selectedIndex >=2){//todo correcto}
document.getElementById("formulario").submit();
}
else
window.alert("No se ha seleccionado un elemento de"+"lalista.");
}
else
window.alert("El e-mail no es correcto *@*.*");
}
else
window.alert("El número está vacio o no es correcto");
}
else
window.alert("No se ha introducido un nombre");
}
</script>
</head>
<body>
<form action="" method="post" id="formulario">
<table align="center">
<caption>Formulario Sencillo</caption>
<tr>
<td>Nombre:</td>
<td><input type="text" name="textNombre" id="textNombre"/></td>
</tr>
<tr>
<td>Número:</td>
<td><input type="text" name="textNumero" id="textNumero"/></td>
</tr>
<tr>
<td>E-mail:</td>
<td><input type="text" name="textEMail" id="textEMail"/></td>
</tr>
<tr>
<td>
<select name="selectListado" id="selectListado">
<option value="Inicial">Selecciona algo...</option>
<option value="Inicial"></option>
<option value="inicial">Opción 1</option>
<option value="inicial">Opción 2</option>
</select>
</td>
</tr>
<td colspan="2" align="center">
<input type="button" value="Enviar" onclick="comprobarYEnviar()">
</td>
</tr>
</table>
</form>
</body>
</html>
Suscribirse a:
Entradas (Atom)