Hola.
En un documento html el identificador debe ser unico, no puede haber mas de una etiqueta con el mismo id.
Recuerda que javascript es sensible a mayusculas, no es lo mismo edad que Edad
para acceder a los label puedes usar previousElementSibling con ello obtienes el elemento anterior.
Tu codigo seria algo asi:
Código:
<!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(){
var 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;
document.getElementById("nombre").previousElementSibling.style.color = "red";
} else {
document.getElementById("nombre").previousElementSibling.style.color = "black";
}
miEmail=document.form1.mail.value;
if(!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(miEmail)){
filtro=0;
errores+= "Escribe tu Email \n"
document.getElementById("mail").previousElementSibling.style.color = "red";
} else {
document.getElementById("mail").previousElementSibling.style.color = "black";
}
miEdad= document.form1.edad.value;
if(isNaN(miEdad)|| miEdad.length==0){
filtro=0;
document.getElementById("edad").previousElementSibling.style.color = "red";
errores+= "Escribe tu edad \n";
}else if(miEdad<18){
filtro=0;
errores+= "Acceso denegado.Eres menor de Edad \n";
document.getElementById("edad").previousElementSibling.style.color = "red";
} else {
document.getElementById("edad").previousElementSibling.style.color = "black";
}
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;
document.getElementById("lenguajes").style.color = "red";
} else {
document.getElementById("lenguajes").style.color = "black";
}
if (document.form1.navegador.selectedIndex==0){
errores += "Debe seleccionar un navegador \n\n";
filtro = 0;
document.getElementById("navegador").previousElementSibling.style.color = "red";
} else {
document.getElementById("navegador").previousElementSibling.style.color = "black";
}
if (filtro == 0) {
alert(errores);
return false;
}
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" name="so" value="Windows" checked> Windows
<input type="radio" name="so" value="Linux" > Linux
<input type="radio" name="so" value="OsX" > OsX
</div>
<div>
<label for="lenguaje" id="lenguajes" >Lenguajes Conocidos</label>
<input type="checkbox" name="lenguaje" value="php" tabindex=5> php
<input type="checkbox" name="lenguaje" value="java" > Java
<input type="checkbox" name="lenguaje" value="c++"> C++
<input type="checkbox" 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>
Saludos.