jquery-1.2.6.js
Você pode ver o script funcionando aqui:
Esse é um exemplo simples de validação de formulários HTML utilizando jQuery. Parte do princípio que é necessário apenas verificar se os campos foram devidamente preenchidos, mas pode ser facilmente estendido para atender propósitos mais específicos. Vou apresentar os códigos e em seguida discuti-los; acredito que essa seja a maneira mais simples e eficiente para explicá-los.
O formulário HTML é bem simples, dois campos do tipo input text, textarea e uma div para exibir as mensagens de erro.http://www.infernatica.xpg.com.br///validacao01.html
Esse é um exemplo simples de validação de formulários HTML utilizando jQuery. Parte do princípio que é necessário apenas verificar se os campos foram devidamente preenchidos, mas pode ser facilmente estendido para atender propósitos mais específicos. Vou apresentar os códigos e em seguida discuti-los; acredito que essa seja a maneira mais simples e eficiente para explicá-los.
A figura acima apresenta o código do formulário que deverá ser validado. Trata-se de um simples formulário HTML, composto de três campos, respectivamente nome, sobrenome e observações, sendo os dois primeiros do tipo input text e o último um text-area. Observe que defini dois atributos extras para cada objeto de inserção de dados: label e req. Na verdade, é perfeitamente possível substituir o atributo label pelo próprio name, porém utilizei o label para apresentar informações mais detalhadas para o usuário. O outro atributo, req, serve para definir que o campo é obrigatório. Observe também que há uma div (#divError), configurada para não ser exibida (style=”display:none”), cujo propósito é apresentar as mensagens de erro oriundas da validação.
Resumidamente, a estratégia desta validação é percorrer os campos do formulário e verificar em quais deles está presente e definido como true o atributo req. Os elementos que definem req=true devem possuir pelo menos um caractere preenchido em seu valor (value).O código entre a linha 8 e 12 serve para fazer a ligação (binding) entre o evento submit do formulário e a função JavaScript validar que criei. A variável canSubmit serve para determinar se o formulário pode ser postado (true) ou não (false). A variável messages irá armazenar todas as mensagens de erro que serão exibidas para o usuário. Observe que ela é iniciada com um elemento do tipo unordered list (<ul>). O código da linha 22 define que a função subseqüente (aquela que lhe é passada como parâmetro) deverá ser executada para todos os elementos que possuir o atributo req definido como true. Na linha 24 é onde se verifica se pelo menos um caractere foi digitado no input (ou no text-area); se detectado um elemento vazio, a variável canSubmit é configurada como false e à variável messages é concatenado o label do elemento que está vazio, entre tags do tipo list item (<li> e </li>), como é exigido pelos elementos list. A execução prossegue para determinar se existem mais campos vazios e, se houver, o procedimento se repete, concatenando mais mensagens de erro à variável messages.
Após todos os elementos que definem req=true terem sido percorridos, o primeiro passo é concatenar, à variável messages, a tag que encerra o unordered list (</ul>). Em seguida é feita uma verificação condicional (if da linha 33) para determinar se o formulário pode ser postado. A verificação consiste, basicamente, em verificar o valor de canSubmit; se falso, as mensagens concatenadas em messages serão inseridas dentro da div cujo id é divError e exibidas com o efeito fadeIn do jQuery, configurado para 300 milissegundos. A última linha da rotina retorna o valor de canSubmit que, se for true, faz com que o formulário seja submetido e, caso contrário, o submit é cancelado.
A figura a seguir ilustra o funcionamento da validação. Você pode testá-la deixando algumas tags sem o atributo req=true. Como eu disse, a partir daí, criar uma validação mais específica não é muito trabalhoso.
O código completo da validação:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Validação com jQuery</title>
<script language="javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
$(
function(){
$("#mainForm").bind("submit", validar);
}
);
/**
* Executa a verificação
*/
function validar(e){
// determina se o form pode ser submetido ou não
var canSubmit = true;
// acumula as mensagens de erro
var messages = "<ul>";
// faz uma busca por todos elementos que especificam o atributo req=true
$("[req=true]").each(
function(){
if($(this).val().length < 1){
canSubmit = false;
messages += "<li>" + $(this).attr("label") + " é obrigatório</li>";
}
}
);
messages += "</ul>";
// verifica se vai exibir as mensagens de erro
if(canSubmit == false)
$("#divError").html(messages).css("color", "red").fadeIn(300);
return canSubmit;
}
</script>
<style>
p{
margin: 2px;
padding: 2px;
}
</style>
</head>
<body>
<form method="post" id="mainForm">
<!-- div que irá exibir as mensagens de erro -->
<div id="divError" style="display:none"></div>
<p>Nome</p>
<input type="text" name="name" label="nome do usuário" req="true"/>
<p>Sobrenome</p>
<input type="text" name="sobrenome" label="sobrenome do usuário" req="true"/>
<p>Observações</p>
<textarea name="obs" label="observações sobre o usuário" req="true"></textarea>
<br/>
<input type="submit" value="Enviar"/>
</form>
</body>
</html>
