Como validar email 2 veces en formulario

Lola Lola · #1 (**permalink**) 25/07/2016, 09:34

Hola amigos!

Bueno, en principio siempre aclaro que no soy programadora, sino una diseñadora que copia y pega codigo de los que saben...

Ahora bien, mi cliente me solicitó que quienes envíen mensajes mediante formulario del sitio web deban escribir su email dos veces a la hora de enviar el mensaje. Esto porque muchas veces escriben mal su correo en el primer campo, y luego mi cliente no tiene como contestarles, y me solicitó agregar al formulario la obligación de escribir dos veces el email obviamente en dos campos distintos, y que el segundo campo no permita copy-paste del primer campo sino que deban escribirlo (tipearlo), y que si no coinciden ambos emails ingresados deban corregirlos...

El codigo que estoy usando en el formulario es de este tipo:

<script language="JavaScript">
function validar() {
if (document.form1.nombre.value == "") {
alert("¡Los campos no pueden ingresar vacios!");
document.form1.nombre.focus();
return false;}

if (document.form1.telefono.value == "") {
alert("¡Debe indicarnos su telefono!");
document.form1.telefono.focus();
return false;}

if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.form1.email.value))
{ return (true) }
else { alert("La dirección de email fue ingresada de forma incorrecta.");
document.form1.email.focus();
return (false);}

}
</script><script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./Contacto ASESOR-ARQ_files/ga.js" type="text/javascript"></script><script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11264255-2");
pageTracker._trackPageview();
} catch(err) {}</script>

Amigos, que codigo debo agregar para realizar lo que el cliente me pide?

Desde ya muchas gracias!!!

Lola Lola

haggenx · #2 (**permalink**) 25/07/2016, 11:27

no te funciona if((/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.form1.email1.value)) && (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(document.form1.email2.value)))

Lola Lola · #3 (**permalink**) 25/07/2016, 14:09

Hola haggenx

Pues no, no me funciona

No valida el campo email2, como si no estuviera...

Alexis88 · #4 (**permalink**) 25/07/2016, 14:18

Para evitar que se copie el contenido de la primera caja del email, solo debes detener la ejecución del evento copy:

Código Javascript:

Ver originaldocument.form1.email1.addEventListener("copy", function(event){
    event.preventDefault();
}, false);

Y para evitar que se pegue el contenido de la primera caja o de otra en la segunda caja del email, solo debes detener la ejecución del evento paste:

Código Javascript:

Ver originaldocument.form1.email2.addEventListener("paste", function(event){
    event.preventDefault();
}, false);

Como se realiza la misma acción, detener el evento ocurrido utilizando el método .preventDefault(), puedes utilizar una función que ejecutarías en ambos casos:

Código Javascript:

Ver originalfunction detener(event){
    event.preventDefault();
}
 
document.form1.email1.addEventListener("copy", detener, false);
document.form1.email2.addEventListener("paste", detener, false);

Aunque aparentemente la expresión regular que utilizas es la adecuada, te sugiero utilizar la que se emplea internamente en los <input> de tipo email de HTML5:

Código Regex:

Ver original/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

Y la evaluación la realizarías así:

Código Javascript:

Ver originalvar regex = /^[a-zA-Z0-9.!#$%&&#8217;*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/,
    email1 = document.form1.email1.value,
    email2 = document.form1.email2.value;
 
if (regex.test(email1) && regex.test(email2)){
    //Instrucciones
}

También puedes utilizar el elemento que mencioné para que evites realizar esta validación, así como el uso del atributo required para impedir que se procese el formulario si alguno de sus campos, que posea dicho atributo, no contenga valor alguno.

#5 (**permalink**) 25/07/2016, 14:57

prueba con esto:

Código HTML:

Ver original<html>
    <head>
    
    <script type="text/javascript">
    
    window.onload = function() {
    var mail = document.getElementById("mail2");
        mail.onpaste = function(e){
        e.preventDefault();
        alert('no paste plx!!');
        };
    };
    
    function validarMail(id) {
    var patron = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if (patron.test(document.getElementById(id).value)){
        return true;
        }
    return false;
    }
    
    function valida(id1, id2){
    var mail1 = document.getElementById(id1);
    var mail2 = document.getElementById(id2);
        if(validarMail(id1) && validarMail(id2) && mail1.value == mail2.value){
        return true;
        }
    return false;
    }
    
    </script>
    
    
    </head>
    <body>
    
        <form method="post" action="" onsubmit="if(!valida('mail1', 'mail2')){ alert('error mails!!'); return false; }">
        <input type="text" value="" name="mail1" id="mail1" /><br/>
        <input type="text" value="" name="mail2" id="mail2" /><br/>
        <input type="submit" value="go!">
        </form>
        
        <br/>
        <?php
        
        echo $_POST["mail1"] ." - ".$_POST["mail2"];
        
        ?>
    </body>
</html>

Lola Lola · #6 (**permalink**) 25/07/2016, 16:49

Muchas gracias a ambos! Estoy probando con los códigos que compartieron