[Resolvido] Validar dois campos de email

[marcelo2605 10]

Pessoal tenho o seguinte código javascript para validar formulários.

 

$(document).ready(function(){
// Place ID's of all required fields here.
required = ["nome", "email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Coloque seu nome.";
emailerror = "Coloque seu e-mail.";

$("#form2").submit(function(){	
	//Validate required fields
	for (i=0;i<required.length;i++) {
		var input = $('#'+required[i]);
		if ((input.val() == "") || (input.val() == emptyerror)) {
			input.addClass("needsfilled");
			input.val(emptyerror);
			errornotice.fadeIn(750);
		} else {
			input.removeClass("needsfilled");
		}
	}
	// Validate the e-mail.
	if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
		email.addClass("needsfilled");
		email.val(emailerror);
	}

	//if any inputs on the page have the class 'needsfilled' the form will not submit
	if ($(":input").hasClass("needsfilled")) {
		return false;
	} else {
		errornotice.hide();
		return true;
	}
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){		
   if ($(this).hasClass("needsfilled") ) {
		$(this).val("");
		$(this).removeClass("needsfilled");
   }
});
});	

 

Da forma em que está, ele valida dois campos: um de nome (emptyerror) e outro de email (emailerror). Mas eu gostaria que ele validasse dois campos diferentes de email. Como faço isso?

[William Bruno 1501]

basta usar o codigo que você já tem:

 

 

                if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
                       email.addClass("needsfilled");
                       email.val(emailerror);
               }

               var email2 = $('#email2');
               if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email2.val())) {
                       email2.addClass("needsfilled");
                       email2.val(emailerror);
               }

sendo o input:

<input type="text" id="email2" .. />

para deixar 'mais bonito', encapsule numa function esse test da ER, e reaproveite código, em vez de duplicar.

[marcelo2605 10]

William, coloquei da seguinte forma:

 

$(document).ready(function(){
       // Place ID's of all required fields here.
       required = ["nome", "email"];
       // If using an ID other than #email or #error then replace it here
       email = $("#email");
       errornotice = $("#error");
       // The text to show up within a field when it is incorrect
       emptyerror = "Coloque seu nome.";
       emailerror = "Coloque seu e-mail.";

       $("#form2").submit(function(){  
               //Validate required fields
               for (i=0;i<required.length;i++) {
                       var input = $('#'+required[i]);

               }

               if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
                       email.addClass("needsfilled");
                       email.val(emailerror);
               }

               var email2 = $('#email2');
               if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email2.val())) {
                       email2.addClass("needsfilled");
                       email2.val(emailerror);
               }

               //if any inputs on the page have the class 'needsfilled' the form will not submit
               if ($(":input").hasClass("needsfilled")) {
                       return false;
               } else {
                       errornotice.hide();
                       return true;
               }
       });

       // Clears any fields in the form when the user clicks on them
       $(":input").focus(function(){           
          if ($(this).hasClass("needsfilled") ) {
                       $(this).val("");
                       $(this).removeClass("needsfilled");
          }
       });
});     

 

Mas não deu certo

[William Bruno 1501]

o que não deu certo ?

 

aperte Ctrl+Shif+J e veja se aparece algum erro.

como esta teu html ?

[marcelo2605 10]

Apareceram alguns, mas nenhum relacionado ao js

 

o html está assim:

 

<form name="form_texto" id="form_texto" method="post" action="#">

                         <fieldset>
                             <label for="destino">Para:</label>
                             <input type="text" name="destino" id="email2" />
                         </fieldset>

                         <fieldset>
                             <label for="nome">Meu nome:</label>
                             <input type="text" name="nome" id="nome" />
                         </fieldset>

                         <fieldset>
                             <label for="email">Meu email:</label>
                             <input type="text" name="email" id="email" />
                         </fieldset>

                         <fieldset>
                             <label for="comentarios">Comentários:</label>
                             <textarea rows="4" id="comentarios"></textarea>
                         </fieldset>

                         <fieldset>
                             <input type="submit" value="Enviar" />
                         </fieldset>
                         <input type="hidden" name="MM_insert" value="form_texto" />
                   </form>

 

Havia me esquecido de editar a terceira linha do js. Ficou assim:

 

$(document).ready(function(){
       // Place ID's of all required fields here.
       required = ["email2", "email"];
       // If using an ID other than #email or #error then replace it here
       email = $("#email");
       errornotice = $("#error");
       // The text to show up within a field when it is incorrect
       emptyerror = "Coloque seu nome.";
       emailerror = "Coloque seu e-mail.";

       $("#form2").submit(function(){  
               //Validate required fields
               for (i=0;i<required.length;i++) {
                       var input = $('#'+required[i]);
               }

               if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
                       email.addClass("needsfilled");
                       email.val(emailerror);
               }

               var email2 = $('#email2');
               if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email2.val())) {
                       email2.addClass("needsfilled");
                       email2.val(emailerror);
               }

               //if any inputs on the page have the class 'needsfilled' the form will not submit
               if ($(":input").hasClass("needsfilled")) {
                       return false;
               } else {
                       errornotice.hide();
                       return true;
               }
       });

       // Clears any fields in the form when the user clicks on them
       $(":input").focus(function(){           
          if ($(this).hasClass("needsfilled") ) {
                       $(this).val("");
                       $(this).removeClass("needsfilled");
          }
       });
});     

 

mas ainda assim, não aparece as mensagens quando aperto enviar

[William Bruno 1501]

E oque não deu certo ?

[marcelo2605 10]

Ao apertar enviar as mensagens de que não há um e-mail válido:

 emailerror = "Coloque seu e-mail.";

Não aparecem

 

Agora deu certo. O código ficou assim:

 

/*
Created 09/27/09										
Questions/Comments: jorenrapini@gmail.com						
COPYRIGHT NOTICE		
Copyright 2009 Joren Rapini
*/



$(document).ready(function(){
// Place ID's of all required fields here.
required = ["destino", "email"];
// If using an ID other than #email or #error then replace it here
email = $("#email");
destino = $("#destino");
errornotice = $("#error");
// The text to show up within a field when it is incorrect
emptyerror = "Email do destinatário.";
emailerror = "Seu email.";

$("#form_texto").submit(function(){	
	//Validate required fields
	for (i=0;i<required.length;i++) {
		var input = $('#'+required[i]);
		if ((input.val() == "") || (input.val() == emptyerror)) {
			input.addClass("needsfilled");
			input.val(emptyerror);
			errornotice.fadeIn(750);
		} else {
			input.removeClass("needsfilled");
		}
	}
	// Validate the e-mail.
	if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(email.val())) {
		email.addClass("needsfilled");
		email.val(emailerror);
	}

	if (!/^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(destino.val())) {
		destino.addClass("needsfilled");
		destino.val(emptyerror);
	}



	//if any inputs on the page have the class 'needsfilled' the form will not submit
	if ($(":input").hasClass("needsfilled")) {
		return false;
	} else {
		errornotice.hide();
		return true;
	}
});

// Clears any fields in the form when the user clicks on them
$(":input").focus(function(){		
   if ($(this).hasClass("needsfilled") ) {
		$(this).val("");
		$(this).removeClass("needsfilled");
   }
});
});