[SOLUCIONADO] contar oraciones y saltos de linea en un textarea

anachanelblanc · #1 (**permalink**) 02/10/2015, 08:12

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>

sintel_1 · #2 (**permalink**) 02/10/2015, 13:56

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.