Validação com CodeIgniter, Twitter Bootstrap e jQuery Validation plugin

5 de novembro de 2012, em Integração, por

CodeIgniter, Twitter Bootstrap e jQuery Validation plugin: exemplo

Quando se pensa em um site, sistema, software ou produto virtual feito com CodeIgniter, também é importante levar em conta quais outras tecnologias estarão presentes, dado que não somente do back-end se dá um projeto de sucesso. Portanto, levar em consideração este tipo de análise no momento do planejamento é algo imprescindível.

Por exemplo, é muito comum que haja formulários a serem preenchidos na maioria dos projetos web e, pensando na boa usabilidade, é importante que eventuais erros de preenchimento sejam devidamente e bem apresentados. Um já consagrado plugin jQuery para validação de formulários é o jQuery Validation; e, se conseguindo integrar, também, o excelente Twitter Bootstrap, então só falta, mesmo, um bom planejamento e estratégia do negócio para o projeto ser um sucesso!

Twitter Bootstrap tem uma apresentação agradável para mensagens de erro em formulários. Usar jQuery Validation plugin pode vir a calhar e, felizmente, é fácil fazer uma integração de ambos com o CodeIgniter.

Os objetivos deste tutorial são:

  • Todos os erros de formulário devem ser exibidos em um único alerta acima do formulário
  • Campos com erros devem ser marcados com vermelho
  • Campos do CodeIgniter também evem ser exibidos num alerta acima do formulário

Códigos da integração

Primeiramente, faça o download do Twitter Bootstrap e jQuery Validation plugin e os “instale” conforme a estrutura de seu projeto. Depois, no arquivo em que vai tratar do código JS da validação, use a função:

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function setValidatorDefaults(errorHandler, message)
{
    $.validator.setDefaults({
        showErrors: function(errorMap, errorList)
        {
            var validation = this;
 
            if (validation.numberOfInvalids() > 0)
            {
                $(errorHandler).html(message);
            }
 
            $(errorList).each(function()
            {
                var error = this;
                validation.settings.highlight(error.element);
            });
 
            for (var i = 0, elements = this.validElements(); elements[i]; i++)
            {
                validation.settings.unhighlight(elements[i], validation.settings.errorClass, validation.settings.validClass);
            }
        }
        ,highlight: function(element)
        {
            $(element).parents('.control-group').addClass("error");
        }
        ,unhighlight: function(element)
        {
            $(element).parents('.control-group').removeClass("error");
        }
        ,onfocusout: false
        ,onkeyup: false
        ,onclick: false
    });
}

Agora, onde quer que você queira validar um formulário, use o seguinte:

?View Code JAVASCRIPT
1
2
3
setValidatorDefaults('.errorHandler', '<div class="alert alert-error"><strong>Ooops!</strong> Preencha todos os campos para continuar.</div>');
 
$("#friendly_form").validate();

Em seu código HTML, você também deve ter uma div com a classe “ErrrorHandler” que deve estar vazia e não estilizada. Esta div será usada para colocar o código de erro proveniente do jQuery Validation.

?View Code HTML4STRICT
1
<div class="errorHandler"></div>

Agora, a mágica do CodeIgniter:

1
2
3
<div class="errorHandler">
<?php echo $this->form_validation->error_string('- ', '<br />', '<div class="alert alert-error">', '</div>'); ?>
</div>

Obviamente você deve adequar sua validação com CodeIgniter a suas necessidades, colocando os caracteres ou tags que achar mais conveniente ao seu projeto.

Estendendo o CodeIgniter para melhor se integrar com Twitter Bootstrap

Você pode estar se perguntando como o método error_string() tem 4 parâmetros. Na verdade, a explicação para isto é uma extensão à biblioteca de validação do CI. Inclusive, já vimos como estender bibliotecas do CodeIgniter.

Então, basta criar o arquivo MY_Form_Validation.php (ou complementar, se já o tiver criado por algum outro motivo) em /application/libraries e acrescentar o seguinte código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php if (!defined('BASEPATH')) exit('No direct script access allowed');
 
class MY_Form_validation extends CI_Form_validation
{
    /**
     * Error String
     *
     * Retorna as mensagens de erro como string, envoltas nos delimitadores de erro
     * NOVO: Adicionada a global "wrapper", útil para a estilização com Twitter Bootstrap
     *
     * @access  public
     * @param   string
     * @param   string
     * @return  str
     */
    public function error_string($prefix = '', $suffix = '', $global_prefix = '', $global_suffix = '')
    {
        // Sem erros: o form está válido
        if (count($this->_error_array) === 0)
        {
            return '';
        }
 
        if ($prefix == '')
        {
            $prefix = $this->_error_prefix;
        }
 
        if ($suffix == '')
        {
            $suffix = $this->_error_suffix;
        }
 
        // Gera a string de erro
        $str = '';
 
        foreach ($this->_error_array as $val)
        {
            if ($val != '')
            {
                $str .= $prefix . $val . $suffix . "\n";
            }
        }
 
        return $global_prefix . $str . $global_suffix;
    }
}
 
/* End of file MY_Form_validation.php */
/* Location: ./application/libraries/MY_Form_validation.php */

Conclusão

Pode parecer complicado de início, mas integrar CodeIgniter, Twitter Bootstrap e jQuery Validation plugin é uma tarefa não muito complexa, como você pôde ver no artigo. Caso ainda não tenha familiaridade com alguma(s) dessas tecnologias, você entenderá mais facilmente o tutorial estudando um pouco.

De qualquer maneira, fica a dica de como realizar a integração dessa fabulosa “trinca” e desenvolver projetos web vencedores que primam pela qualidade do back-end, boa estrutura de HTML e CSS e JavaScript da melhora qualidade!

6 comentários em "Validação com CodeIgniter, Twitter Bootstrap e jQuery Validation plugin"

gravatar

Danny Herran  em 5 de novembro de 2012

Hi, I am Danny Herran the original author of this article. Please fix the source, it says "blog de Bastian Heist", should be "blog de Danny Herran".

Thank you.

gravatar

Tárcio Zemel  em 7 de novembro de 2012

Sorry, Danny! Done! ;-)

gravatar

Valnei  em 18 de janeiro de 2013

Parabéns pelo post!

Existe um projeto no github que integra o CI + Bootstrap:
https://github.com/sjlu/CodeIgniter-Bootstrap

Gostaria de saber sua opnião.

gravatar

Tárcio Zemel  em 18 de janeiro de 2013

Olha só, ainda não conhecia! Assim que possível vou baixar e fazer alguns testes. Obrigado por compartilhar!

gravatar

william  em 9 de maio de 2013

Eu baixei !! mto bom !! valew a dica

gravatar

Breno  em 4 de setembro de 2013

Cara, tem como vc fazer um exemplo e disponibilizar? De qualquer forma valeu pela dica!

    Comente!