O Desenvolvedor

Normalmente opto pelo uso do jQuery Validate para validação de formulário (veja como ignorar o jQuery Validate), mas em uma tela que estava trabalhando eu tinha vários formulários que abriam em modal (usando o PrettyPhoto) e eram manipulados antes da abertura dependendo das ações do usuário naquela tela.

Ao invés de usar o validate achei que seria mais simples implementar uma função para validação, seguindo a seguinte regra:

• Os elementos com a classe "required" devem ser obrigatórios
• Adicionar a classe "error" aos elementos obrigatórios não preenchidos
• Exibir um elemento com a mensagem de erro do formulário
• Retornar true se passar na validação

A função ficou bastante simples e poderia ser escrita facilmente sem o uso do jQuery.

Validação sem plugin

function validateForm(form){
    var err = 0;
    form.children('.required').each(function(){
        if($(this).val() == '' || $(this).val() == null){
            $(this).addClass('error');
            form.children('.error_form').show();
            err++;
        }
    })
    if(err == 0)
        return true
}

 

Update

Seguindo a dica do Chris, a validação do exemplo acima pode ser substituída por uma expressão regular que verifica se a string é vazia no javascript, como no exemplo abaixo:

function notNull (x){
        if(a!="" && !(a.match(/^\s+$/))){
            return true;
        }else{
            return false;
        }
}

A função segue a seguinte lógica:

1. Recebe como parâmetro um objeto do jQuery (optei por isso ao invés do id ou classe pois meu código já tinha uma variável com o form selecionado por questões de performance.
2. Cria uma variável chamada err com valor 0, que irá contabilizar os erros (caso exitam).
3. Percorre todos os elementos do formulário e busca pelos que tenham a classe "required", percorrendo todos estes e:
   1. Verifica se o valor do elemento é vazio ou null, se for adiciona a classe "error" no elemento e mostra o elemento com classe "error_form" que está no formulário (caso exista).
   2. Soma 1 a variável err.
4. Se depois de percorrer todos os elementos com classe "required" nenhum erro for contabilizado retorna true.

 

Seria possível retornar também o número de erros em caso de false, modificando o final da função para:

    if(err == 0)
        return true
    else
        return err;

Sei que validação já é um assunto um pouco "manjado" de javascript e muita gente opta pelos plugins, resolvi compartilhar para mostrar como funciona e exeplificar que nem sempre é necessário a gente inserir plugin para tudo o que vamos fazer…

Vi alguns questionamentos em fóruns sobre seletor de classe em javascript e resolvi compartilhar uma solução do fórum, que extende o document para que seja possível fazer seleção de elementos por classe sem a necessidade de usar uma biblioteca (jQuery, por exemplo) para isso.

Já postei um exemplo em HTML5 da selector API (querySelector), mas como isso só é suportado por browsers modernos a solução abaixo quebra o galho (e se getElementsByClassName for nativa do navegador ele usa a função nativa).

Função getElementByClassName

A função abaixo permite que você user document.getElementByClassName('nomeDaClasse') para fazer seletores sem o uso de nenhuma biblioteca.

if (document.getElementsByClassName == undefined) {
    document.getElementsByClassName = function(className)
    {
        var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
        var allElements = document.getElementsByTagName("*");
        var results = [];

        var element;
        for (var i = 0; (element = allElements[i]) != null; i++) {
            var elementClass = element.className;
            if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                results.push(element);
        }

        return results;
    }
}
 

Na maioria dos projetos uso jQuery, mas tem alguns que o javascript é tão simples que não é necessário os 29Kb – e esse seletor de classes já quebra o galho. 🙂

Solução de um colaborador do DevShed.