Hola. Sobre este código, comprueba si los campos introducidos son correctos o no. Lo que me gustaría hacer es que si son incorrectos me marcara el cuadro de validación, (o el texto del titulo) a rojo para que resaltara más.
¿Alguien sabe como hacer esto?
Código:
<html>
<head>
<title>Ejercicio 5</title>
<link href="style/ej05.css" type="text/css" rel="stylesheet" />
<script>
function validarEntero(valor){
valor = parseInt(valor)
if (isNaN(valor)) {
return ""
}else{
return valor
}
}
function valida_envia(){
//valido el nombre
if (document.formulario.nombre.value.length==0){
alert("You have to write your name")
document.formulario.nombre.focus()
document.formulario.nombre.style.color="#ff0000";
return 0;
}
if (document.formulario.apellidos.value.length==0){
alert("You have to write your surname")
document.formulario.apellidos.focus()
return 0;
}
if (document.formulario.sex.selectedIndex==0){
alert("You must select your sex")
document.formulario.sex.focus()
return 0;
}
if (document.formulario.edad.selectedIndex==0){
alert("You must introduce your birtday")
document.formulario.edad.focus()
return 0;
}
}
</script>
</head>
<body>
<table class="exterior">
<tr>
<td class="exterior">
<table class="interior">
<tr>
<th colspan="2">
Formulario de contacto
</th>
</tr>
<form name="formulario">
<tr>
<td class="tittle">
Nombre*
</td>
<td class="content">
<input type="text" name="nombre" size="30" maxlength="100">
</td>
</tr>
<tr>
<td class="tittle">
Apellidos*
</td>
<td class="content">
<input type="text" name="apellidos" size="30" maxlength="100">
</td>
</tr>
<tr>
<td class="tittle">
Sexo*
</td>
<td class="content">
<select size="1" name=sex>
<option value=""></option>
<option value="Hombre">Hombre</option>
<option value="Mujer">Mujer</option>
</select>
</td>
</tr>
<tr>
<td class="tittle">
Fecha de nacimiento*
</td>
<td class="content">
<input type="text" name="edad" size="10" maxlength="10">
</td>
</tr>
<tr>
<td class="tittle">
Numero de teléfono
</td>
<td class="content">
<input type="text">
</td>
</tr>
<tr>
<td class="tittle">
Correo electrónico
</td>
<td class="content">
<input type="text">
</td>
</tr>
<tr>
<td class="tittle">
Aficiones*
</td>
<td class="content">
<select name=afic>
<option value="Fotografia">Fotografía</option>
<option value="Musica">Música</option>
<option value="Cine">Cine</option>
<option value="Viajar">Viajar</option>
<option value="Lectura">Lectura</option>
</select>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="Aceptar" onclick="valida_envia()">
</td>
</tr>
</form>
</table>
</td>
</tr>
</table>
</body>
</html>