Problema de registro =(

[kabel91]

Buenas, tengo un pequeño problema, estoy haciendo una pagina web en la que e puesto un formulario para que la gente se registre en mi pagina, lo que quiero es que algunos campos sean obligatorios para registrarse y debera introducirlos.
Problemas:
-1º He puesto varios onblur al salir de cada input de type text y llamando a una funcion javascript en la cual valoro si estan vacios salga un alert, y en el de contraseña he añadido a esa parte una para que las contraseñas tienen que coincidir. El caso esque he puesto varios onBlur y no me los hace pero si solo coloco 1 onBlur funciona bien.
-El 2º me gustaria que si no estan rellenados todos esos campos obligatorios digamos que el boton enviar qque es un input type submit no funcionara, y la verdad estoy un poco perdido y no se como hacerlo.

Dejo una parte del codigo aver si os ayuda con algo, sino podeis pedir mas informacion y os la dare con gusto muchas gracias por adelantado y espero que alguien pueda ayudarme =(.

Código:

function valida()
{

	var n1=document.getElementById('n1');
	if(n1.value.length == 0)
	{
	n1.style.backgroundColor="blue";
	alert('Debe Introducir su Nick');
	}

}

Esa era la funcion de javascript, ahora el input type text.

Código:

<td class="letreg">*Nick:<br><input type="text" name="nick" size="25" id="n1" onBlur="valida()"></td>

[esjuanma]

Kabel, si dejaras tu código completo podríamos ayudarte mejor.

la función "valida" esta bien, pero podríamos hacerle una correción:

Código HTML:

function valida()
{
	if(input .value.length == 0)
	{
	input.style.backgroundColor="blue";
	alert('Debe Introducir su ' + input.name);
	}

}

<input type="text" name="nick" size="25" onBlur="valida(this)"> 

Y ahora que hicimos ese cambio a la función, podemos agregar mas inputs y reutilizarla:

Código HTML:

<input type="text" name="teléfono" onBlur="valida(this)"> 

[kabel91]

Buenas, tenia un error en el link del archivo .js y tambien un par de fallos, lo he arreglado mirando la solucion que me as dado esjuanma y ya funciona todo bien ahora lo que me gustaria seria validar el email para que este bien escrito y hacer que si todos los campos del formulario estan bien escrito entonces que enviar funcionara sino k diera un error diciendo que te falta algun campo por rellenar. A ver si alguien me podria echar una pequeña mano se lo agradeceria mucho. =)

[esjuanma]

Creamos la función validarEmail, que devuelve TRUE si el email es válido o FALSE si es inválido:

Código:

function validarEmail(valor) {
if ( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor) ){
return true
} else {
return false
}
}

Fuente: [URL="http://lineadecodigo.com/javascript/validar-el-email-con-javascript/"]lineadecodigo.com/[/URL]

Y ahora pasamos a verificar que todo este en orden.
Para eso usamos el evento Javascript "onsubmit":

Código:

/**
 * Con window.onload nos aseguramos de que ya
 * se hayan cargado todos los elementos de la página
 */
window.onload = function()
{
	// El siguiente bloque de código se ejecuta solo cuando se hace el submit del formulario
	document.getElementById('formulario').onsubmit = function(event)
	{
		var form = this,
			inputs = form.getElementsByTagName('input'),
			error = [],
			input;
		
		// Revisamos que todos los inputs tengan algún valor que no sea nulo (obviando el input submit)
		for(x in inputs)
		{
			input = inputs[x]
			
			if(input.type !== 'submit')
			{
				if(input.value == '')
				{
					error.push('Debe completar el campo ' + input.name)
				}
			}
		}
		
		// Usamos la función validarEmail creada anteriormente
		// Si la validación devuelve FALSE, agregamos el error al array
		if( ! validarEmail(form.getElementById('email').value) )
		{
			error[] = 'El email ingresado no es válido'
		}
	
		// Si hay errores, cancela el envío del formulario (event.preventDefault()) y dá una alerta
		if(error.length > 0)
		{
			event.preventDefault()
			alert(error.join('\n'))
		}
	}
}

Espero haya sido de ayuda

[esjuanma]

ahh, como verás, para que todo funcione, el ID del formulario debe ser "formulario" y el ID de email es "email". Perdón por la redundancia.

[esjuanma]

Otro detalle.
En el último bloque de código, estuvimos usando Javascript 'no intrusivo'.
Esto, en pocas palabras, quiere decir que nos estamos evitando el insertar código Javascript en nuestros elementos HTML, y lo que antes era:

Código HTML:

<form action="form.php" onsubmit="validarForm()">
<!--
inputs
-->
</form> 

Ahora es:

Código HTML:

<form action="form.php">
<!--
inputs
-->
</form> 

[kabel91]

No te voy a mentir, me pierdo un poco con la explicacion, no digo que no este bien o que no funcione esque mi codigo queda asi:

Código:

<form name="form" action="registro.php" method="post">

Nick:<input type="text" name="nick" size="25" id="n1" onBlur="validanick()">
E-Mail:<input type="text" name="email" size="25" id="mai" onBlur="validamail()" >

<input type="submit" class="botton" value="Enviar" name="env1" >

</form>

Este es mi formulario, y ahora las funciones de javascript

Código:

function validamail()
{


	var mail=document.getElementById('mai');
	if(mail.value.length == 0)
	{
	mail.style.backgroundColor="#A0D003";
	alert('Debe Introducir su E-Mail');
	}


    	if ( /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(mail.value) ){

        return true

    	} else {

        return false

    	}

}

Y lo que no funciona es lo del email si esque esta bien escrito o mal escrito, lo otro de enviar solo cuando este todo bien contestado no entiendo bien la logica que sigue.

[esjuanma]

Hola.
Disculpas, la validación del mail no funciona correctamente.
Te paso la correción, así debería funcionar bien:

Código:

function validamail()
{


	var mail=document.getElementById('mai');
	if(mail.value.length == 0)
	{
	mail.style.backgroundColor="#A0D003";
	alert('Debe Introducir su E-Mail');
	}


    	if ( /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_]+.?[A-za-z]*$/.test(mail.value) ){

        return true

    	} else {

        return false

    	}

}

[kabel91]

Acabo de probar tu codigo y la verdad esque no ace nada, pongo tu codigo introduzco c.com en el input y cuando cambio el foco no me salta nada. Y esque he buscado mas codigos de validacion y ninguno me ha funcionado.

[esjuanma]

kabel, por favor, pasanos tu código completo (HTML y Javascript).
De ese modo podremos ver mejor donde está el error y ayudarte más fácilmente.

[kabel91]

Os paso todo el codigo:

Codigo HTML

Código:

<form name="form" action="registro.php" method="post">

Nick:<input type="text" name="nick" size="25" id="n1" onBlur="validanick()">
E-Mail:<input type="text" name="email" size="25" id="mai" onBlur="validamail()" >

<input type="submit" class="botton" value="Enviar" name="env1" >

</form>

Codigo Javascript

Código:

function validamail()
{


	var mail=document.getElementById('mai');
	if(mail.value.length == 0)
	{
	mail.style.backgroundColor="blue";
	alert('Debe Introducir su E-Mail');
	}


    	if ( /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_]+.?[A-za-z]*$/.test(mail.value) ){

        return true

    	} else {

        return false

    	}





}

function validanick()
{

	var n1=document.getElementById('n1');
	if(n1.value.length == 0)
	{
	n1.style.backgroundColor="blue";
	alert('Debe Introducir su Nick');
	}

}

[esjuanma]

Kabel, en realidad el código está funcionando bien.
El único problema es que, si el email no es válido, el script no muestra ninguna alerta.
Le agregué solo una línea de código:

Código:

alert('Debe Introducir un E-Mail válido');

Y quedaría así:

Código HTML:

<html>

<body>

<script>

function validamail()
{


	var mail=document.getElementById('mai');
	if(mail.value.length == 0)
	{
		mail.style.backgroundColor="blue";
		alert('Debe Introducir su E-Mail');
	}


    	if ( /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_]+.?[A-za-z]*$/.test(mail.value) ){

			return true

    	} else {

			alert('Debe Introducir un E-Mail válido');
			return false

    	}
}

function validanick()
{
	var n1=document.getElementById('n1');
	if(n1.value.length == 0)
	{
	n1.style.backgroundColor="blue";
	alert('Debe Introducir su Nick');
	}

}

</script>

<form name="form" action="registro.php" method="post">

	Nick:<input type="text" name="nick" size="25" id="n1" onBlur="validanick()">
	E-Mail:<input type="text" name="email" size="25" id="mai" onBlur="validamail()" >

	<input type="submit" class="botton" value="Enviar" name="env1" >

</form> 

[kabel91]

Joer, tienes razon esque vi el return true o false y pense que lo hacia mal, ya siento el despiste, aunque ahora lo que me queda es entender ese codigo y luego la parte de que si no estan bien escritos los campos no me deje enviar el formulario alguien tendria alguna idea¿? me haria un grandisimo favor.

[kabel91]

Buenas, lo que me faltaba era que no pudiera mandar el formulario para registrarlo en mi base de datos si no estaban todos los campos bien escritos y tal, me dieron una idea de hacer una funcion general que valorara el nick y el email x ejemplo cada ved k salia de cada onblur pero el prolema es que na mas salir del nombre o nick me saltara lo del email y claro la persona diria pero si aun no he llegado... haber si alguien podria echarme una mano muchas gracias por adelantado =)