<!-- ). 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(miForm) {
/* Validación de campos NO VACÍOS */
if ((miForm.Jugador1.value.length == 0) ||
(miForm.Jugador2.value.length ==0) ||
(miForm.Jugador3.value.length ==0)){
alert('falta información en los campos');
return false;
}
return true;
}
</script>
</head>
<body>
<form name="miForm" method="get" onsubmit="return Valida(this)" action="mailto:mi@mail.com" >
<p>
Jugador1 <input type="text" name="Jugador1"><br>
Jugador2 <input type="text" name="Jugador2"><br>
Jugador3 <input type="text" name="Jugador3"><br>
<input type="submit" value="Enviar" name="enviar"/>
</p>
</form>
</body>
</html>
Mostrando entradas con la etiqueta campos en blanco. Mostrar todas las entradas
Mostrando entradas con la etiqueta campos en blanco. 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>
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>
Suscribirse a:
Entradas (Atom)