Validação de dados não é muito importante para certificar-se que os dados que estão sendo inseridos, de fato correspondem ao que se deseja. A validação pode ser feita direto no banco dados, direto na aplicação ou em ambos.

Geralmente a validação feita no banco não é muito "amigável" apresentando erros que seriam como "grego" ao usuário, é óbvio que estes erros podem ser tratados pela aplicação, mas esta não é a questão. O mais utilizado é a validação feita no lado da aplicação e no lado do banco, isso significa que são 2 camadas de segurança antes de persistir o dado.

Atualmente existem sistemas que fazem a validação através de requisições (GET ou POST por exemplo), dessa forma sempre que o usuário clicar em salvar é feita uma requisição, processado os dados e então validado. O problema nisso é a demora na resposta ao usuário, pois se o usuário esqueceu-se de colocar uma "vírgula" todo processamento e validação deve ser concluído para só então mostrar o erro ao usuário.

As validações através de requisições (refresh nas páginas) são mais utilizadas para grandes processamentos que precisam de validações complexas, como por exemplo: validação de uma chave de criptografia hash de 128bits. Coisas simples como: verificar se o nome está vazio, se o email é válido ou se a senha é segura podem ser feita via JavaScript sem muito trabalho e ainda retornar a resposta ao usuário sem precisar dar um refresh na página, ou seja, em real-time.

O jQuery Validate

Vamos aplicar neste artigo um validador em jQuery que funciona perfeitamente na maioria dos casos sem a necessidade de muito código complexo. É claro que há casos e casos, e uma hora ou outra você pode precisar realizar uma validação real-time mais complexa, e o jQuery Validate não lhe deixará na mão.

Primeiro você deve baixar o jQuery Validate que se encontra na lista de links no final deste artigo. Depois de feito o download basta importar o arquivo principal (jquery.validate.js), semelhante ao código da Listagem 1.

Listagem 1: Importando jQuery Validate


<script type='text/javascript' src='../../js/jquery.validate.js'></script>

O próximo passo é definir o que você vai validar, que geralmente (99% das vezes) é um formulário. Vamos utilizar um formulário de cadastro de usuários, mostrado abaixo.

Listagem 2: Formulário a ser validado


<form action="" enctype="multipart/form-data" method="post" name="form_cad_usuario"
id="form_cad_usuario">
 
    <label for="ativo">Ativo:</label>
    <input type="checkbox" name="ativo" id="ativo" value="s" <?php
    if (isset($pojoUsuario)) {
        if ($pojoUsuario->getAtivo() == 's')
            echo "checked";
    }
    else
        echo "checked";
    ?> /><br /><br />

    <label for="cod_perfil">Perfil:</label>
    <select name="cod_perfil">
        <?php
        $list_perfis = ControllerPerfil::getInstance()->BuscarTodos();

        if (isset($pojoUsuario)) {
            if ($pojoUsuario->getPerfil() != null) {
                $cod_perfil_selected = $pojoUsuario->getPerfil()->getCod_perfil();
            }
            else
                $cod_perfil_selected = 0;
        }
        else
            $cod_perfil_selected = 0;

        foreach ($list_perfis as $l) {
            $nome = $l->getNome();
            $cod = $l->getCod_perfil();
            if ($cod == $cod_perfil_selected)
                echo "<option value='$cod' selected>$nome</option>";
            else
                echo "<option value='$cod'>$nome</option>";
        }
        ?>
    </select><br/><br/>

    <label for="nome">Nome*:</label>
    <input placeholder="Informe o Nome" type="text" name="nome" id="nome"
    value="<?php
    if (isset($pojoUsuario)) {
        echo $pojoUsuario->getNome();
    }
    ?>" /><br />

    <label for="email">E-mail*:</label>
    <input placeholder="Informe o Email" type="text" name="email" id="email"
    value="<?php
    if (isset($pojoUsuario)) {
        echo $pojoUsuario->getEmail();
    }
    ?>" /><br />

    <div class="acoes">
        <input type="submit" name="salvar" value="Salvar" />               
        <input type="reset" name="cancelar" value="Cancelar"
        onclick="dialogoConfirm('Cancelar', 'Deseja Cancelar ?')" />
    </div>
</form>

Perceba que os campos com * (asterisco) são obrigatório e você deve usar a lógica para escolher os campos que você deve ou não validar. Por exemplo, o campo Ativo é obrigatório mas pelo fato de ser um checkbox não tem como o usuário não preencher, pois ou ele está marcado ou não está, sendo assim qual a finalidade de verificar se este campo está preenchido ? Nenhuma. Outro exemplo é o campo Perfil, pelo fato de ser um combobox e sempre vai ter algum item selecionado, não tem como o usuário não selecionar um item, pois sempre haverá um item selecionado mesmo que ele nem mexa neste campo.

São essas características que você deve levar em consideração antes de sair validando todos os campos. Tomando nota disto, vamos agora colocar o código que valida este formulário.

Listagem 3: Código para validar o formulário


//Validação de Cadastro de Usuário
    $('#form_cad_usuario').validate({
        errorLabelContainer: ".containerError",
        wrapper: "li",
        rules: {
            nome: {
                required: true
            },
            email: {
                required: true
            },
            cod_perfil:{
                required: true
            }
        },
        messages: {
            nome: {
                required: "O campo nome é obrigatório"
            },
            email: {
                required: "O campo email é obrigatório"
            },
            cod_perfil:{
                required: "O Perfil é obrigatório"
            }
        }
    });

O jQuery validate é inicializado com a palavra chave "validate()" e é divido em 2 grandes partes: rules (regras) e messages (mensagens). Cada rule tem uma message respectiva e cada rule é aplicado a um campo através do seu ID.

Por exemplo, estamos aplicando no campo "nome" à regra "required: true" que significa que este campo é obrigatório, conseqüentemente temos na seção de messages um campo "nome" com a message "required". Assim sendo, sempre que o campo nome não for preenchido a mensagem que está no required do campo nome será exibida ao usuário.

E onde está mensagem será exibida ? Exatamente dentro do “errorLabelContainer” que você pode definir como uma div sua ou span ou table ou qualquer outro container que você desejar. O Wrapper diz como essas mensagens serão exibidas, ou seja, no nosso caso acima se tivermos 10 mensagens elas serão exibidas dentro de “.containerError”, cada uma dentro de uma tag LI.

Conclusão

O jQuery Validate ainda tem funções pertinentes a pós-execução e pré-execução da validação, além de possibilitar que você mesmo crie sua validações, em vez de usar required, email, equalTo ou outras padrões você pode criar uma validacaoDoJoao e assim por diante.

Links