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
Código Javascript
:
Ver original<!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>