Mostrando entradas con la etiqueta comprobar. Mostrar todas las entradas
Mostrando entradas con la etiqueta comprobar. Mostrar todas las entradas

martes, 21 de marzo de 2017

Formulario con menú desplegable, menú ckeckbok y menú radio

<!-- 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>