Estou com um problema que é o seguinte... Estou fazendo um formulário de contato que tem uma validação.
A validação está funcionando corretamente (ele muda a cor dos inputs enquanto preencho), porém clicando no botão enviar, ele envia o formulário, independente de ter ou não erros no preenchimento.
Alguém consegue me ajudar a achar o erro?
contato.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> <script language="JavaScript" src="jquery.js" type="text/javascript"></script> <script language="JavaScript" src="validation.js" type="text/javascript"></script> </head> <body> <form method="post" action="" id="customForm"> <label>Seu nome:</label> <input name="nome" type="text" id="nome" size="30"><br> <label>Seu e-mail:</label> <input name="email" type="text" id="email" size="30"><br> <label>Assunto:</label> <input name="assunto" type="text" id="assunto" size="30"><br> <label>Mensagem:</label> <textarea name="mensagem" rows="8"></textarea><br> <label> </label> <input type="submit" value="Enviar mensagem" id="enviar" name="enviar"> </form> </body> </html>validation.js
$(document).ready(function(){
var form = $("#customForm");
var nome = $("#nome");
var email = $("#email");
var assunto = $("#assunto");
var mensagem = $("#mensagem");
nome.blur(validateNome);
email.blur(validateEmail);
assunto.blur(validateAssunto);
mensagem.blur(validateMensagem);
name.keyup(validateNome);
email.keyup(validateEmail);
assunto.keyup(validateAssunto);
mensagem.keyup(validateMensagem);
form.submit(function(){
if(validateNome() & validateEmail() & validateAssunto() & validateMensagem()){
return true;
} else {
return false;
}
});
function validateEmail(){
var a = $("#email").val();
var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.test(a)){
email.removeClass("error");
return true;
}
else{
email.addClass("error");
return false;
}
}
function validateNome(){
if(nome.val().length < 4){
nome.addClass("error");
return false;
}
else{
nome.removeClass("error");
return true;
}
}
function validateAssunto(){
if(assunto.val().length < 4){
assunto.addClass("error");
return false;
}
else{
assunto.removeClass("error");
return true;
}
}
function validateMessage(){
if(message.val().length < 10){
mensagem.addClass("error");
return false;
}
else{
mensagem.removeClass("error");
return true;
}
}
});style.css#customForm input[type=text] {
width:300px;
padding:5px;
margin:3px 0px;
color: #949494;
border: 1px solid #cecece;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
#customForm input[type=text].error{
background: #f8dbdb;
border-color: #e77776;
}
#customForm textarea {
width:300px;
padding:5px;
margin:3px 0;
color: #949494;
border: 1px solid #cecece;
font-family: Arial, Verdana, Helvetica, sans-serif;
}
#customForm textarea.error{
background: #f8dbdb;
border-color: #e77776;
}Muito obrigado!
