Autor Tema: Verificar formulario en javascript  (Leído 2539 veces)

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Verificar formulario en javascript
« 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
Código: [Seleccionar]
<!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>
« Última modificación: 29 de Septiembre 2015, 11:46 por anarubia »

César Krall

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2074
  • No vales por lo que dices, sino por lo que haces
    • Ver Perfil
    • aprenderaprogramar.com
Re:Verificar formulario en javascript
« Respuesta #1 en: 01 de Octubre 2015, 09:38 »
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!
Responsable de departamento de producción aprenderaprogramar.com

anarubia

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 36
    • Ver Perfil
Re:Verificar formulario en javascript
« Respuesta #2 en: 02 de Octubre 2015, 16:07 »
Gracias, saludos

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".