Comprobacion de campos y validacion

xavier22 · #1 (**permalink**) 21/06/2014, 13:48

Hola, resulta que tengo en mi codigo html una función javascript llamada "Enviar" , esta lo que hace es que recoge varios campos de un formulario y los ejecuta y los envía a un servidor para conectarse.
Queria saber como hacer unas comprobaciones de que los campos no estén vacíos y si estan vacíos lanzar el mensaje de error, y si esta todo relleno ejecutar la funcion que tengo implementada.
No se como deberia hacerlo, ya que he pensado en hacer una función de Validar los campos ( no se muy bien la sintaxis) y si todo esta correcto entonces llamar a la funcion de Validar...no se si es posible llamar a una función desde dentro de otra funcion.
Alguna sugerencia sobre la sintaxis de comprobarlos campos y llamar a la función validar??

Pd: Soy nuevo en Javascript y he probado con mucho codigo, pero nunca me funciona, siempre se me envía .

Alexis88 · #2 (**permalink**) 21/06/2014, 14:58

Primero, necesitas cancelar el evento submit, el cual se produce cuando envías los datos del formulario para procesarlos. Luego, bastaría con que obtengas al conjunto de elementos del formulario y con un bucle realices la verificación de cada elemento. Podrías utilizar una variable que inicie con un valor determinado y que cambiará en caso se encuentre algún elemento vacío, de acuerdo al valor final de dicha variable, realizas o no el envío de los datos.

Código Javascript:

Ver originalvar formulario = document.getElementById("id_formulario"),
    elementos = formulario.elements,
    total = elementos.length;
 
formulario.addEventListener("submit", function(event){
    event.preventDefault(); //Cancelo el envío
 
    var enviar = true; //La variable
 
    for (var i = 0; i < total; i++){
        if (!elementos[i].value.length){
            alert ("Debes de ingresar datos en el campo " + elementos[i].name);
            enviar = false; //Cambia el valor de la variable
            break; //Salgo del bucle
        }
    }
 
    if (enviar) this.submit(); //Si todos los campos tienen valores, envío los datos
}, false);

Para cancelar el evento, utilizo el método preventDefault, mientras que el envío de los datos, lo realizo con el método submit (que es distinto al evento submit, pero están relacionados).

Saludos

xavier22 · #3 (**permalink**) 22/06/2014, 06:40

Gracias por la respuesta, mas o menos me ha quedado claro pero no me funciona.
Lo unico que no he entendido (quizas esta mal escrito) es el false del final , puede que tenga un error de sintaxis.

Te paso mi codigo con esto implementado a ver si me ayudas a encontrar el error, y muchas gracias de todos modos.

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Title</title>
        
        <script src="http://localhost/Evolution/WebChat/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript" src="http://localhost/Evolution/WebChat/Scripts/MD5.js"></script>
		
		
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
		body 
		{
		background-image: url(Emoticons/fondo.jpg);
		background-repeat: repeat;
		}
    </style>
		
    </head>
	
    <body>
		 
        <form  id="HtmlForm" action="http://localhost/Evolution/WebChat/WebChat.aspx" method="GET" target="formresult" onLoad = "calcHash">
            
            <div style="width: 100%; text-align: center">
			
			    <h1 ><img src="Emoticons/iAgent.ico" alt=""/> <font face ="Comics Sans MS, arial, verdana" size= 120 > EvoCHAT</font> <img src="Emoticons/sobre.jpg" align="right" width="81" height="66" alt="" / > </h1>

                <h2><font face ="Comics Sans MS, arial, verdana"> Formulario para la petición de chat con el Agente.</font></h2>
				
            </div>
    
			<div style="width: 90%; margin: auto">
                
					<div style="text-align: center">
				
						<P><br />
						<!--Tema: -->  
						<select id="theme" name="theme" style="visibility:hidden" >
							<option value="Default">Default</option>
							<option value="Blue">Blue</option>
						</select>
						
					  <br/><strong>Nombre / Alias : </strong><input type ="text" id="username" name="username" value="" />
					  
					   <br/><strong>Email :</strong> <input id="email" name="email" value="" class=''  size='30' maxlength='100' title='direccion de correo'    />
						
						<br/>
					
						<!--DN Estrategia:-->
						<strong>Motivo de la consulta:</strong></p>
						<p>
							 <textarea id="consulta" name="consulta"  rows ="10" cols="40"  value="" class='' type="text" size='60' maxlength='400'   /> </textarea> 
							
						</p>
						
						<p>
						
						<div id="x" style="display:none;">
						<input id="strategy" name="strategy" value="chat" style="visibility:hidden"   />
							<br /><!-- Salted Hash:  --><input id="hash" name="hash" value="hash" style="visibility:hidden; width: 350px;" /> 
						<input type="button" onclick="calcHash()"   value="Calcular hash MD5"  />
						</div>
						
						</p>
						
					</div>
				
					<br/>
				
					<div style="text-align: center">
						<button id= "enviar" name="enviar" style="width: 130px; height: 50px;">Conectar a WebChat</button>
						<button input type ="reset" value=" Borrar Informacion" onclick= ;style="width: 130px; height: 50px;">Restablecer campos</button>
					</div>
            
			</div>
				
        </form>
        
        <div style="width: 90%; margin: auto">

            <br/>
            <!--HashSecret: -->
            <input id="hashsecret" name="hashsecret" value="abcde" disabled="disabled"  style="visibility:hidden"/>
            <p>
                &nbsp;</p>
            <p style="font-size: small">
                <strong>NOTA:</strong> Este ejemplo asume que Evolution 
                WebChat y el servidor Evolution están alojados en el mismo servidor.&nbsp; En 
                caso de estar alojados en máquinas distintas será necesario modificar el código 
                de esta página de ejemplo para reemplazar 
                'localhost' por la dirección pública del servidor WebChat.</p>

        </div>
        
    </body>

    <script>

        function calcHash() 
        {

            var textPlain = 'theme=' + $('#theme').val() + '&username=' + $('#username').val() + '&email=' + $('#email').val()+ '&strategy=' + $('#strategy').val();

            var salt = $('#hashsecret').val();

            $('#hash').val( calcMD5(textPlain + salt) );
        }

         function FormSubmit() 
		 {
			
            window.open("http://localhost/Evolution/WebChat/WebChat.aspx", 'formresult', 'height=640, width=480, resizable=yes, location=no, scrollbars=no, menubar=no, toolbar=no, status=no');
            $('#HtmlForm').submit();
			}
		   
		function validar()
		{
			var formulario = document.getElementById ("HtmlForm"),
			elementos = formulario.elements,
			total = elementos.length;
			
			formulario.addEventListener ("FormSubmit", function(event)
			{
				event.preventDEfault();
				var enviar= true;
				
				for (var i = 0; i<total; i++)
				{
					if (!elementos[i].value.length)
					{
						alert ("Debes rellenar todos los campos") + elementos[i].name);
						enviar = false;
						break;
					}
				
				}
				
				if (enviar) this.submit();
			}, false);

		}
      

    
    </script>
</html>

Alexis88 · #4 (**permalink**) 22/06/2014, 20:13

Noto varios errores. Para empezar, el código que te mostré era para que reemplaces a la función que usabas para validar. El primer argumento que le paso al método addEventListener es el nombre del evento que se produce, que en este caso es el evento submit, el id del formulario está sobrando. El tercer y último parámetro del método es el valor booleano false, con el cual evito que se produzca la propagación del evento en el resto del documento.

Lee la información de los enlaces que adjunto (las palabras en color anaranjado) para que tengas más claro el tema.

Saludos