Validacion de formulario sin alert

rogeliomx · #1 (**permalink**) 09/05/2011, 03:12

Hola que tal estoy haciendo un formulario y quiero validarlo con javascript, lo que trato de hacer es por ejemplo a un campo de texto que sea mayor de 3 caracteres, si no lo es que me aparezca dentro de la mismo pagina "Mínimo tres caracteres", pero no quiero que salga en un alert sino en un div o en un span dentro de la misma pagina, he intentado lo siguiente:

Código:

<html>
	<head>
		<title></title>
		
		<script>
		
			function valida(){
				var obj = document.getElementById('errorusuario');
				obj.innerHTML="Minimo 4 caracteres";
			}
		
		</script>
				
	</head>
	
	<body>
	
		<form name="formusu">
			<div id="errorusuario"></div>
			<button onclick="valida()">Aceptar</button>		
		</form>
	</body>
</html>

Pero me actualiza toda la pagina y borra el mesaje.

No creo tener que usar ajax por que no hay peticion al servidor ni parece que sea necesaria, entonce que puedo hacer para que la pagina no se actualice y no desaparezca el mensaje.

Naahuel · #2 (**permalink**) 09/05/2011, 07:46

Yo creo que sería mejor asignar la función para cuando el form sea enviado. Es decir para el evento "onsubmit". Mirá este ejemplo:

Código HTML:

Ver original<html>
    <head>
        <title></title>
        
        <script>
        
            function valida(){
                var obj = document.getElementById('errorusuario');
                obj.innerHTML="Minimo 4 caracteres";
                //return false si hay error, return true si no lo hay
                return false;
            }
        
        </script>
                
    </head>
    
    <body onsubmit="return valida()">
    
        <form name="formusu">
            <div id="errorusuario"></div>
            <input type="text" />
            <input type="submit" value="Validar" /> 
        </form>
    </body>
</html>

Nesitás tener un input de tipo submit que llamará a la función. Si la función devuelve FALSE el form no es enviado. Si no hay errores la función valida() debe devolver TRUE y entonces el form se envía normalmente.

rogeliomx · #3 (**permalink**) 10/05/2011, 16:48

Muchas gracias por tus respuestas solo tengo una dudas antes de implementar el código.

Es necesario que el onSubmit este en el body??

Es necesarios usar un input submit?? no podria hacerlo con un boton??

rogeliomx · #4 (**permalink**) 10/05/2011, 16:50

Cita:

Iniciado por rogeliomx

Muchas gracias por tus respuestas solo tengo una dudas antes de implementar el código.

Es necesario que el onSubmit este en el body??

Es necesarios usar un input submit?? no podria hacerlo con un boton??

Jeje ya hice las respectivas pruebas y funciono gracias por tu ayuda.

Naahuel · #5 (**permalink**) 11/05/2011, 11:21

Ups! Fue error mío, perdón. El onsubmit debe ir en el form! Me alegra que ya lo tengas funcionando igual :)