Mostrando entradas con la etiqueta comprobación campos vacios. Mostrar todas las entradas
Mostrando entradas con la etiqueta comprobación campos vacios. 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>
Publicado por en No hay comentarios:
Etiquetas: , , , , , , , , , , , , ,

Formulario que nos pide DNI, nombre, dirección, código postal y lo envía por correo

<!-- 5). Formularios, validación longitud, email, etc. Expresiones regulares. -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<script>
    function Valida(formulario) {
        /* Validación de campos NO VACÍOS */
        if ((formulario.campo1.value.length == 0) ||
        (formulario.campo2.value.length ==0) ||
        (formulario.cpostal.value.length ==0) ||
        (formulario.dni.value.length ==0) ||
        (formulario.email.value.length ==0)) {
            alert('falta información en los campos');
            return false;
        }  
       
       
        if (isNaN(parseInt(formulario.campo2.value))) {
            alert('el campo2 debe ser un número');
            return false;
        } 
        /* validación del CÓDIGO POSTAL*/
        var ercp=/(^([0-9]{5,5})|^)$/;
        if (!(ercp.test(formulario.cpostal.value))) { 
            alert('El contenido del código postal no es un CÓDIGO POSTAL');
            return false;
        }
        /* validación del DNI */
        var erdni=/(^([0-9]{8,8}\-[A-Z])|^)$/;
        if (!(erdni.test(formulario.dni.value))) { 
            alert('Introduzca un DNI válido con este formato 00000000-Z');
            return false; 
        }
        /* validación del e-mail */
        var ercorreo=/\w+@\w+.\w+/;         
        if (!(ercorreo.test(formulario.email.value))) { 
            alert('Contenido del email no es CORREO ELECTRÓNICO válido.');
            return false;
        }
        /* si no hemos detectado fallo devolvemos TRUE */
        return true;
    }
   
</script>
</head>

<body>
<form name="miFormulario" onsubmit="return Valida(this);" action="mailto:mi@mail.com" >
    Campo1 <input type="text" name="campo1"><br>
    Campo2 <input type="text" name="campo2"><br>
    cpostal <input type="text" name="cpostal"><br>
    dni <input type="text" name="dni"><br>
    email <input type="text" name="email"><br>
    <input type="submit" value="Enviar" name="enviar">
</form>
</body>
</html>
Publicado por en No hay comentarios:
Etiquetas: , , , , , , ,
Suscribirse a: Entradas (Atom)