Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: anarubia en 29 de Septiembre 2015, 11:31
-
hola, estoy verificando un formulario en javascript, pero no soy capaz de que cada vez que cuando el dato introducido en el campo del formulario sea erróneo, la etiqueta label que corresponda al campo del formulario cambie a color rojo y el foco se coloque en ese campo del formulario.¿ como sería el código que tengo que añadir?, gracias
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/formulario.css">
<script type="text/javascript">
function verificaDatos(){
filtro = 1;
errores = "Datos incorrectos. Verifique formulario\n\n"
miNombre=document.form1.nombre.value;
if (!miNombre==/^[A-z]{3,10}$/.test(miNombre) || miNombre.length==0){
errores+= "Escribe tu nombre \n";
filtro=0;
}
miEmail=document.form1.mail.value;
if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(miEmail)){
filtro=0;
errores+= "Escribe tu Email \n"
}
miEdad= document.form1.Edad.value;
if(isNaN(miEdad)|| miEdad.length==0){
filtro=0;
errores+= "Escribe tu edad \n";
}else if(miEdad<18){
filtro=0;
errores+= "Acceso denegado.Eres menor de Edad \n";
}
miLenguaje = document.form1.lenguaje;
bandera=0;
for (i=0; i<miLenguaje.length; i++){
if (miLenguaje[i].checked){
bandera++;
}
}
if (bandera==0){
errores += "No hay lenguajes seleccionados. Elija al menos uno \n";
filtro=0;
}
if (document.form1.navegador.selectedIndex==0){
errores += "Debe seleccionar un navegador \n\n";
filtro = 0;
}
if (filtro == 0) {
alert(errores);
return 0;
}
alert("Su formulario ha sido enviado");
document.form1.submit();
}
</script>
</head>
<body>
<div id="contenedor">
<form action="" id="form1" name="form1" method="post" enctype="multipart/form-data">
<div>
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" autofocus >
</div>
<div>
<label for="mail">Email</label>
<input type="text" id="mail" name="mail" >
</div>
<div>
<label for="edad">Edad</label>
<input type="text" id="edad" name="edad" >
</div>
<div>
<label for="so">Sistema Operativo</label>
<input type="radio" id="so" name="so" value="Windows" checked> Windows
<input type="radio" id="so" name="so" value="Linux" > Linux
<input type="radio" id="so" name="so" value="OsX" > OsX
</div>
<div>
<label for="lenguaje">Lenguajes Conocidos</label>
<input type="checkbox" id="lenguaje" name="lenguaje" value="php" tabindex=5> php
<input type="checkbox" id="lenguaje" name="lenguaje" value="java" > Java
<input type="checkbox" id="lenguaje" name="lenguaje" value="c++"> C++
<input type="checkbox" id="lenguaje" name="lenguaje" value="asp" > asp
</div>
<div>
<label for="navegador">Navegador:</label>
<select name="navegador" id="navegador" >
<option value="">Seleccione Navegador</option>
<option value="explorer">Explorer</option>
<option value="chrome">Chrome</option>
<option value="firefox">Firefox</option>
<option value="safari">Safari</option>
</select>
</div>
<div>
<label for="observa">Observaciones:</label>
<textarea name="observa" id="observa" maxlength="256" ></textarea>
</div>
<div>
<input type="button" value="Enviar" onclick="verificaDatos()" >
</div>
</form>
</body>
</html>
-
Hola Ana
Con los contenidos de este curso se puede hacer: http://aprenderaprogramar.com/index.php?option=com_content&view=category&id=78&Itemid=206
Hay varias entregas dedicadas a formularios, aplicación del foco sobre elementos, cambios de propiedades css, etc.
Saludos!
-
Gracias, saludos