Webpoint

Já expliquei em posts anteriores como usar o validade e como usar o Ajax Form. Agora irei mostrar como os dois em conjunto oferece uma solução completa para controle de formulários, validação cliente, remota e envio de dados por Ajax de uma forma simples, intuitiva, de fácil manutenção e para qualquer situação.

Será usado um exemplo prático com um formulário simples que possui os seguintes campos:

As validações que serão feitas serão as seguintes:

• Nome: é obrigatório e não poderá existir nomes duplicados (exemplo de validação remota)
• Idade: é necessário que seja número e não poderá ser maior que 18 (criação de um novo método de validação), já demonstrado anteriormente
• E-mail: precisa ser um e-mail válido
• País: precisa escolher ao menos uma opção

O código da marcação HTML é bem direto:

<form name="validate" id="validate" action="enviar_dados.php" method="post">

<label for="nome">Nome:</label>
<input type="text" name="nome" />

<label for="idade">Idade:</label>
<input type="text" name="idade" />

<label for="email">E-mail:</label>
<input type="text" name="email" />

<label for="pais">Pa&iacute;s:</label>
<select type="text" name="pais">
<option value="">Selecione</option>
<option value="brasil">Brasil</option>
<option value="canada">Inglaterra</option>
</select>

<input type="submit" value="Validar" />

</form>

Depois de ter inserido o jQuery, Validate e Form Plugin no cabeçalho, podemos usá-lo para validar o formulário de acordo com as regras estabelecidas. Irei demonstrar o código e depois explicar cada item:

$(function(){

$("#validate").validate({

submitHandler: function(form) {
$(form).ajaxSubmit({
dataType: 'html',

success: response
});
},
rules: {
nome: {
required: true,
remote: 'remote.php'
},
idade: {
required: true,
minAge: 18
},
email: {
required: true,
email: true
},
pais: 'required'
},
messages: {
nome: {
required: 'Você não preencheu seu nome',
remote: 'Este nome ja existe'
},
idade: {
required: 'Você não preencheu sua idade'
},
email: {
required: 'Você precisa preencher um e-mail',
email: 'Endereço de e-mail não válido'
},
pais: 'Você precisa escolher um país'
}

});

});

A diferença deste código em relação ao post anterior sobre o validate é o fato de agora existir uma validação remota. Observe a nova regra 'remote', em que podemos passar uma  url que será passado o valor daquele campo (por padrão como get), então ele irá esperar uma resposta no formato JSON com simplesmente um valor true ou false. Neste caso, como no código abaixo ele verifica se já existe um nome 'alexandremagno':

<?php

$nome = $_GET['nome'];
if($nome == 'alexandremagno') {
echo 'false';
} else {
echo 'true';
}

?>

Vale lembrar que este não é um código utilizado na prática, pois é simplesmente como demonstração. No server-side, devemos verificar nomes duplicados de acordo com o banco de dados, então provavelmente seria um select verificando se já existe este nome no banco de dados. O exemplo simples ilustra a situação. Com o este método, poderemos unificar no validate para toda resposta sobre validação, mesmo que seja remota. Não haverá mais desta forma diferenciação entre validação cliente/servidor. Apesar disto, a verificação no  back-end deve ser feita (para usuários que não tenha javascript habilitado ou que desabilitem o javascript).

O método submitHandler do Validate

Este método é onde os dois plugins se encontram. Com este método podemos controlar o que irá acontecer no envio do formulário. Quando não é utilizada, ela irá enviar o formulário normalmente. Após utilizá-la, podemos passar o formulário como parâmetro e usá-lo para por exemplo, impedir que o formulário seja enviado e assim podermos utilizar um envio por ajax ou qualquer lógica dependendo da situação. Neste caso nós o utilizamos para chamar o Ajax Form:

submitHandler: function(form) {
$(form).ajaxSubmit({
type: 'post',
success: response
});
},

No sucesso, passamos uma função chamada response que irá enviar os dados e retornar a mensagem de sucesso que será inserida no DOM como se segue:

function response(data) {
$("#validate").resetForm();
$('#mensagem').remove();

var mensagem;

if(data) {

mensagem ='Dados validados com sucesso';

} else {

mensagem = 'Não foi possível validar os dados';

}

$('<div id="mensagem">'+mensagem+'</div>')
.hide()
.insertAfter('h1')
.fadeIn('slow');
}

A função response aceita o parâmetro data que é o retorno da requisição feita por ajax. Vale lembrar que este uso pode ser totalmente não-obstrusivo, pois várias frameworks já possuem métodos em suas classes para identificar a natureza da requisição e retornar o tipo de dado adequado. Neste caso o retorno é uma parte de HTML que pode ser usado para ser inserido no DOM.

Primeiramente usamos um método do Form Plugin que limpa todos os dados do formulário, depois remove qualquer div com o id mensagem para evitar que seja inserida novamente. Logo depois os dados vindos da requisição são inseridos com um efeito fade logo após o título. Tive que utilizar o método hide do jQuery antes, pois o efeito fade pode é percebido em um elemento que esteja inicialmente escondido.

Exemplo da integração do Validate com o Form Plugin

Desta forma, o controle de formulário fica totalmente na responsabilidade desses dois plugins integrados. Para formulários maiores e lógicas mais complexa podemos seguir o mesmo raciocínio sem maiores problemas.

Artigos relacionados

• Validando formulários com o plugin Validate
• Ajax form
• Ajax com o Jquery