[SOLUCIONADO] Como validar email en formulario de recomendar web

jesusvipze · #1 (**permalink**) 17/07/2011, 10:35

Hola , soy nuevo y no sabía muy bien donde meter esta pregunta.
Vereis , tengo un formulario donde los visitantes pueden recomendar mi web.
Tengo hecha la validación en javascript para evitar que la gente no escriba nada.

El caso es que me gustaría obligar a introducir emails válidos primero en javascript y más adelante preguntaré en foro oho para validar esto también en lado servidor.

Los codigos que tengo actualmente son:

Para validar que se rellene el formulario de cara navegador:

<script language="JavaScript"
type="text/javascript">
function Validar_formulario_recomendar(theForm)</script>

Esto justo antes del formulario. Luego tengo el siguiente código para el formulario:

<form style="background-color: rgb(204, 184, 203);"
action="recomendanos.php" method="post"
onsubmit="return Validar_formulario_recomendar(this)"
name="recomendanos" id="recomendanos" text-align=""
center="" background-color="">
<div
style="text-align: left; background-color: rgb(204, 184, 203);"><span
style="font-family: Comic Sans MS;">Tu nombre:</span><br>
</div>
<input name="nombre" size="18"><br>
<div style="text-align: left;"><span
style="font-family: Comic Sans MS;">Tu email:</span><br>
</div>
<input name="email" size="18"><br>
<div style="text-align: left;"><span
style="font-family: Comic Sans MS;">Email de tu
amigo:</span><br>
</div>
<input name="destinatario" size="18"><br>
<br>
<input value="Enviar a un amigo" name="B1"
type="submit">
<span style="font-family: Century Gothic;"><span
style="text-decoration: underline;"><br>
<br>
</span></span></form>

EL archivo php que se ejecuta es el que hace que se envíe el mensaje a la otra persona recomendando mi sitio web.

Quiero integrar en este código una función para validar los email.

yo he encontrado este codigo para validar emails y lo tengo puesto en head.:

<script language="JavaScript"> function isEmailAddress(theform.email.value, email )
{
var s = theform.email.value;
var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;
if (s.length == 0 ) return true;
if (filter.test(s))
return true;
else
alert("Ingrese una dirección de correo válida");
theElement.focus();
return false;
}
</script>

¿Como puedo llamar a esa función dentro de mi código? NI siquiera sé si he puesto bien los parámetros a la función. Si todo saliera bien, así al menos obligaría a la introducción del email del remitente evitando el spam.

¡Espero que me podais ayudar por favor!

ceSharp · #2 (**permalink**) 18/07/2011, 07:02

buenas,
te la he 'tuneado' un poco para que la puedas usar:
---------------------
function isEmailAddress(email)
{
var s = email.value;
var filter=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/;
if (s.length == 0 )
{alert("no ha escrito ninguna dirección");email.focus();return false;}
if (filter.test(s))
return true;
else
alert("Ingrese una dirección de correo válida");
email.focus();
return false;
}
------------------------
para llamarla tienes que enviarla como parámetro el objeto INPUT entero (donde escribes la dirección de correo):
---------------------
<input type="button" id="tu_input_button" onclick="isEmailAddress(document.getElementById('t u_input_text'));" />
----------------------
ahora bien, lo único que hace esa función es comprobar que no está vacía y que no mete caracteres no permitidos de una dirección de correo (tipo %,&,$,etc.), nada más que eso. Si te vale con eso pues guay.

saludos.

jesusvipze · #3 (**permalink**) 18/07/2011, 09:57

Muchas gracias por lo que me comentas... No me funciona bien este codigo porque necesito obligatoriamente que funcione para objeto submit button, pues el resto del código funciona con ese <input.> Además es cierot , necesito una función integrada en mi código que oblige a la introduccion de al menos el email de quien recomienda (si son los dos emails mejor aún) .

Es decir que no trague con dejar espacios en blanco con la barra espaciadora (que eso no lo he validado porque no tengo ni idea de como se hace) y que oblige a introducir un email válido. POr tanto que no me acepte si en vez de poner [email protected] (por ejemplo) poner correoyahoo y que trague.

Muchas gracias, ayudadme por favorrrrr...

jesus dominguez .

ceSharp · #4 (**permalink**) 19/07/2011, 00:46

mira,
de momento te paso una función que te dice si el usuario ha tecleado solo espacios en blanco en un input_text:
-----------------------
function strBlanco(str)
{
var numCaracStr = str.length;
var espacios = str.split(" ");
var numEspacios = espacios.length - 1;
if(numEspacios == numCaracStr)
return false;
else
return true;
}
-----------------------

llamas a esta función con el value del input y te devuelve false si solo ha tecleado espacios. en cuanto a una función en javascript que valide un email bueno, se puede hacer algo en plan detectar una estructura. es decir, que la cadena de texto tenga caracteres permitidos, que haya una arroba en medio, pero lo que nunca te va a hacer es comprobar que la dirección es válida; solo que la estructura es la correcta.

ahora bien, como más de una vez he dicho, si no estoy en lo cierto que alguien me calle! jejejeje.

saludos.

ceSharp · #5 (**permalink**) 19/07/2011, 05:12

hola de nuevo,
mira, he encontrado cositas por las webs y te montado una función bastante sencilla, que te detecta cualquier fallo en una dirección de correo:
--------------------------
function comprobarCorreo(email)
{
var exMail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(exMail.test(email.value)==false)
{
alert("la dirección no tiene una estructura correcta");
email.focus();
return false;
}
else
return true;
}
--------------------------
solo con esto te va a contemplar si está vacío el campo, si solo ha metido espacios, que tiene arroba, que no hay puntos ni al principio ni al final, ni caracteres raros, que el dominio tenga 3 o menos letras... en fin, todas las validaciones necesarias para aceptar una dirección de correo. Eso sí, seguimos solo contemplando la estructura, no si el correo es válido o no. se la llama de la misma manera que te puse:
---------------------------
<input type="text" id="un_input" />
<input type="button" value="Comprobar" onclick="comprobarCorreo(document.getElementById(' un_input'));" />
---------------------------

saludos.

jesusvipze · #6 (**permalink**) 19/07/2011, 15:28

Muchas gracias por tu interés. Voy a probar la función que tal gentilmente me has buscado. En efecto tienes toda la razón, sólo es posible revisar que la dirección de correo electrónico tenga una estructura correcta. La única manera de comprobar que el visitante está introduciendo su email , es el método de confirmación opt-in.

(Te envian un email a tu bandeja y debes confirmar el email desde tu correo antes de que se envíe el formulario...ejem , esto si que tiene que ser supercomplicado...)

Respecto a lo de los espacios en blanco , he logradpo que me funcione y contaré cómo , por si a alguien le sirve tu solución o la mía. He añadido un ¿parámetro? o como se llame que no se, que es replace. La línea añadida para validar los espacios en blanco está señalada en rojo:

<script language="JavaScript"
type="text/javascript">
function Validar_formulario_recomendar(theForm)</script>
<form style="background-color: rgb(204, 184, 203);"
action="recomendanos.php" method="post"
onsubmit="return Validar_formulario_recomendar(this)"
name="recomendanos" id="recomendanos" text-align=""
center="" background-color="">
<div
style="text-align: left; background-color: rgb(204, 184, 203);"><span
style="font-family: Comic Sans MS;">Tu nombre:</span><br>
</div>
<input name="nombre" size="18"><br>
<div style="text-align: left;"><span
style="font-family: Comic Sans MS;">Tu email:</span><br>
</div>
<input name="email" size="18"
onkeypress="return Pulsar(event,this)"><br>
<div style="text-align: left;"><span
style="font-family: Comic Sans MS;">Email de tu
amigo:</span><br>
</div>
<input name="destinatario" size="18"><br>
<br>
<input value="Enviar a un amigo" name="B1"
type="submit">
<span style="font-family: Century Gothic;"><span
style="text-decoration: underline;"><br>
<br>
</span></span></form>
</td>

jesusvipze · #7 (**permalink**) 19/07/2011, 15:30

Lo de replace como puedes ver en el código se puede poner en cualquier campo que se quiera , aprovechando el nombre o id del campo del formulario.

Voy a aprobar lo de la validación del email y luego revisaré como valido una fecha en otro formulario. Te cuento amigo.

jesusvipze · #8 (**permalink**) 20/07/2011, 11:47

Querido amigo , muchas gracias por tu función y tu respuesta que valoro 100% positiva. AL final , tras comerme la cabeza de una forma tonta, para llamar a las dos funciones, he llegado a la conlusión correcta.

Para todos aquellos empecinados en llamar a dos funciones con el mismo formulario, les diré que esto siempre da problemas, ya qye normalmente no te ejecuta una de las dos. ësto me pasaba a mi, o me validaba, o me comprobaba el correo, jeje.

Bien , no hay que tener dos funciones para un formulario , sino hacer de las dos una,, e integrarlas. Nada de poner return hacia otra función dentro de la funcion validar, ni nada de hacer comparaciones raras con if en el evento onsubmit como he leido por aquí. La solución es :

Validar_formulario_recomendar(theForm) es la función que valida el formulario. He añadido dentro de ella la que valida el correo electrónico.
MI error y el de muchos era que lo añadía con la instrucción function delante y ésto javascript se ve que no lo entendía. La clave está en poner todo el código de la otra función , la de comprobarCorreo(email) al final de la función de validar, pero dentro de ella, entre sus llaves, como código adicional a ejecutartras las primeras validaciones.

El código completamente funcional es:

<script language="JavaScript"
type="text/javascript">
function Validar_formulario_recomendar(theForm)<-
{
if (theForm.nombre.value == "")
{
alert("Por favor rellena tu nombre");
theForm.nombre.focus();
return (false);
}
if (theForm.nombre.value.length < 2)
{
alert("Por favor rellena completamente tu nombre");
theForm.nombre.focus();
return (false);
}
if(theForm.nombre.value.replace(/ /g, '') == '')
{
alert("Debe Ingresar un nombre");
theForm.nombre.focus();
theForm.nombre.select();
return false;
}
if (theForm.email.value == "")
{
alert("Por favor rellena tu email");
theForm.email.focus();
return (false);
}
if (theForm.email.valuelength < 2)
{
alert("Por favor rellena correctamente tu email");
theForm.email.focus();
return (false);
}
if(theForm.email.value.replace(/ /g, '') == '')
{
alert("Debe Ingresar un email válido");
theForm.email.focus();
theForm.email.select();
return false;
}
if (theForm.destinatario.value == "")
{
alert("Por favor rellena el email a quien deseas recomendar esta web");
theForm.destinatario.focus();
return (false);
}
if (theForm.destinatario.valuelength < 2)
{
alert("Por favor rellena correctamente el email de tu amigo/a");
theForm.destinatario.focus();
return (false);
}
if(theForm.destinatario.value.replace(/ /g, '') == '')
{
alert("El email de destino no es válido");
theForm.destinatario.focus();
theForm.destinatario.select();
return false;
}
var exMail = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;
if(exMail.test(theForm.email.value)==false)
{
alert("El email introducido no es correcto");
theForm.email.focus();
theForm.email.select();
return false;
}
else
return true;
}
//--></script>

Muchísimas gracias colega

jesusvipze · #9 (**permalink**) 20/07/2011, 11:50

Una pregunta, ¿si tengo otra duda sobre otro formulario relacionada con la validación puedo
presentar la duda aquí o debe ser en otro nuevo tema...

gracias

jesusvipze · #10 (**permalink**) 20/07/2011, 11:56

Muchísimas gracias colega, ahora como decía voy a ver si puedo validar los dos correos así y si puedo os lo cuento. Voy a preguntar en parte php como se valida ésto, para añadirlo a código de php de formulario recomendar que también os facilitaré funcional por si a alguien le sirve. En foro php , claro.

jesusvipze · #11 (**permalink**) 20/07/2011, 12:08

Perdonad si soy pesado, pero a mi bola he logrado hacer que se validen los dos emails, no sólo uno.
Os dejo el código. He cambiado en el primer else de la validación del correo, en vez de dar true, obligar a la validación del otro correo:

<script language="JavaScript"
type="text/javascript">
function Validar_formulario_recomendar(theForm)</script>

Espero que os haya servido de ayuda.