Javascript – Validar Formulário Básico

Categoria: Javascript, destaque_miniPublicado em: 08/03/2009
Javascript – Validar Formulário Básico

Validar formulários hoje em dia usando javascript é o básico do básico no desenvolvimento de páginas web.

Porém, existem formulário e formulários. Então vamos começar pelo básico. Os campos mais comuns e as validações mais usadas, assim como as máscaras dos campos.

Para isso vamos usar um exemplo que eu criei para o torneio de javascript do fórum scriptbrasil. Você pode ver os detalhes do torneio na página: Torneio Javascript Etapa 1 (básico) – ScriptBrasil.

Resolvi disponibilizar o meu exemplo aqui porque o mesmo recebeu a maior nota do torneio, fazendo dele então o código de validação campeão da primeira etapa do torneio.

torneiojs1

Como você pode ver na imagem, utilizo o nickname Mestre SAM no fórum.

Vejamos uma tela do resultado final do formulário:

telatorneiojs1

O código fonte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="pt">
<head><title>Torneio Javascript - ScriptBrasil - por Mestre SAM</title>

<meta name="copyright"         content="Copyright 2009 by Mario SAM">
<meta name="description"     content="Torneio Javascript ScriptBrasil">

<style type="text/css">
<!--
body {
margin: 0px auto;
font: 11px Arial, Verdana;
}

label {
width: 100px;
float: left;
margin-top: 8px;
text-align: right;
}

span {
width: 250px;
float: left;
}

form input, select {
width: 200px;
border: 1px solid #000000;
color: #c0f2a1;
font: 11px Arial, Verdana;
font-weight: bold;
padding: 2px;
margin: 5px;
background-color: #363636;
}

form input:focus, select:focus {
background-color: #000000;
}

fieldset {
border: 0px;
padding: 5px;
margin: 10px;
}

legend {
text-transform: uppercase;
font-weight: bold;
}

#div_central {
width:800px;
margin:0 auto;
}

#div_esquerda {
float: left;
width: 398px;
background-color: #ffffff;
border: 1px solid #999999;
margin: 2px;
}

#div_form {
float: left;
width: 388px;
background-color: #eeeeee;
margin: 5px;
paddgin: 5px;
}

#div_direita {
float: left;
width: 300px;
background-color: #ffffff;
border: 1px solid #ffffff;
margin-left: 10px;
}

#msg_erros {
float: left;
width: 90%;
background-color: #ffcccc;
border: 3px solid #ff0000;
padding: 5px;
}
-->
</style>

<script type="text/javascript">
//faz a mudanca dos campos entre pessoa fisica e pessoa juridica.
function tipoPessoa( campo ) {
//limpa as mensagens e os valores dos inputs
document.getElementById('msg_erros').style.display = "none";

document.getElementById('nome').value = "";
document.getElementById('cpf').value = "";
document.getElementById('rg').value = "";

document.getElementById('razao').value = "";
document.getElementById('cnpj').value = "";
document.getElementById('ie').value = "";

//marca e habilita os campos na tela
if ( campo.value == "fisica" ) {
document.getElementById('bloco_pj').style.display = "none";
document.getElementById('bloco_pf').style.display = "";

//tira e inclui campos na validacao dinamica
document.getElementById('nome').alt = "obrigatorio";
document.getElementById('cpf').alt = "cpf";
document.getElementById('rg').alt = "obrigatorio";
document.getElementById('razao').alt = "";
document.getElementById('cnpj').alt = "";
document.getElementById('ie').alt = "";
} else { //senao eh juridica
document.getElementById('bloco_pf').style.display = "none";
document.getElementById('bloco_pj').style.display = "";

//tira e inclui campos na validacao dinamica
document.getElementById('nome').alt = "";
document.getElementById('cpf').alt = "";
document.getElementById('rg').alt = "";
document.getElementById('razao').alt = "obrigatorio";
document.getElementById('cnpj').alt = "cnpj";
document.getElementById('ie').alt = "obrigatorio";
}
}

//faz adicao de mascaras para os campos pre formatados.
function put_mask( campo, formato, event ) {
var texto = formato.substring( campo.value.length );
var tecla = window.event ? event.keyCode : event.which;

//(32)espaço (8)backspace (46)delete
if ( tecla!=8 && tecla!=32 && tecla!=46 ) {
if ( texto.substring(0,1) != formato.substring(0,1) ) campo.value += texto.substring(0,1);
}
}

//validacao dinamica do formulario.
function validarForm( frm ) {
var msg='';

for ( i=0; i<frm.length; i++ ) {
if ( frm[i].type=='text' ) {
if ( frm[i].alt=='email' ) {
msg += validaFormatos( frm[i], /^[w!#$%&'*+/=?^`{|}~-]+(.[w!#$%&'*+/=?^`{|}~-]+)*@(([w-]+.)+[A-Za-z]{2,6}|[d{1,3}(.d{1,3}){3}])$/ );
}
if ( frm[i].alt=='cep' ) {
msg += validaFormatos( frm[i], /^[0-9]{5}-[0-9]{3}$/ );
}
if ( frm[i].alt=='cnpj' ) {
msg += validaFormatos( frm[i], /^[0-9]{2}.[0-9]{3}.[0-9]{3}/[0-9]{4}-[0-9]{2}$/ );
}
if ( frm[i].alt=='cpf' ) {
msg += validaFormatos( frm[i], /^[0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}$/ );
}
if ( frm[i].alt=='obrigatorio' ) {
msg += campoObrigatorio( frm[i] );
}
} else if ( frm[i].type=='select-one' ) {
if ( frm[i].value=='' ) {
msg += "<p>- Campo <b>"+ frm[i].name +"</b> obrigatorio</p>";
}
} else {
//alert ( frm[i].type );
}
}

if ( msg != '' ) {
msg = "<p><b>Erros:</b></p>" + msg;
document.getElementById('msg_erros').innerHTML = msg;
document.getElementById('msg_erros').style.display = "";
return false;
}

alert( "Formulario OK!" );
return true;
}

//valida os formatos dos campos
function validaFormatos( campo, padrao ) {
var msg = campoObrigatorio( campo );

if ( msg=='' )
if (! padrao.test( campo.value ) )
return '<p>- Campo <b>'+campo.name+'</b> invalido</p>';

return msg;
}

//retira espacos em branco para verifica se o campo foi preenchido.
function campoObrigatorio( campo ) {
var semEspacos = campo.value.replace(/^s+|s+$/, '');

if ( semEspacos.length == 0 )
return '<p>- Campo <b>'+campo.name+'</b> obrigatorio</p>';

return '';
}
</script>

</head>
<body>

<noscript>
Voce deve habilitar seu javascript para que a pagina funcione corretamente.
</noscript>

<div style="float:left; width:100%; margin-top:20px; margin-bottom:20px; text-align:center;">
TORNEIO <b>SCRIPTBRASIL</b> - JAVASCRIPT: ETAPA 1
</div>

<div id="div_central">
<div id="div_esquerda">
<div id="div_form">
<form name="frm" action="etapa1.html" method="POST" onsubmit="return validarForm(this);">
<fieldset>
<legend>formulário de cadastro</legend>
<p>
<input type="radio" name="tipo" value="fisica" style="width:60px;" onclick="javascript:tipoPessoa(this);" checked>Pessoa Física
<input type="radio" name="tipo" value="juridica" style="width:60px;" onclick="javascript:tipoPessoa(this);">Pessoa Jurídica
</p>
<hr>
<div id="bloco_pf">
<p>
<label>Nome:</label>
<span><input type="text" name="nome" id="nome" value="" maxlength="100" alt="obrigatorio"></span>
</p>
<p>
<label>CPF:</label>
<span><input type="text" name="cpf" id="cpf" value="" onkeypress="put_mask(this, '###.###.###-##', event)" maxlength="14" style="width:80px;" alt="cpf"></span>
</p>
<p>
<label>RG.:</label>
<span><input type="text" name="rg" id="rg" value="" maxlength="14" style="width:80px;" alt="obrigatorio"></span>
</p>
</div>
<div id="bloco_pj" style="display:none;">
<p>
<label>Razão Social:</label>
<span><input type="text" name="razao" id="razao" value="" maxlength="150"></span>
</p>
<p>
<label>CNPJ:</label>
<span><input type="text" name="cnpj" id="cnpj" value="" onkeypress="put_mask(this, '##.###.###/####-##', event)" maxlength="18" style="width:100px;"></span>
</p>
<p>
<label>Inscrição Estadual:</label>
<span><input type="text" name="ie" id="ie" value="" maxlength="18" style="width:100px;"></span>
</p>
</div>
<p>
<label>Cep:</label>
<span><input type="text" name="cep" id="cep" value="" onkeypress="put_mask(this, '#####-###', event)" maxlength="9" alt="cep" style="width:60px;"></span>
</p>
<p>
<label>Endereço:</label>
<span><input type="text" name="endereco" id="endereco" value="" maxlength="150" alt="obrigatorio"></span>
</p>
<p>
<label>Bairro:</label>
<span><input type="text" name="bairro" id="bairro" value="" maxlength="50" alt="obrigatorio"></span>
</p>
<p>
<label>Cidade:</label>
<span><input type="text" name="cidade" id="cidade" value="" maxlength="50" alt="obrigatorio"></span>
</p>
<p>
<label>Estado:</label>
<span>
<select name="estado" id="estado">
<option value="">Selecione o Estado</option>
<option value="AC">Acre</option>
<option value="AL">Alagoas</option>
<option value="AM">Amazonas</option>
<option value="AP">Amapá</option>
<option value="BA">Bahia</option>
<option value="CE">Ceará</option>
<option value="DF">Distrito Federal</option>
<option value="ES">Espírito Santo</option>
<option value="GO">Goiás</option>
<option value="MA">Maranhão</option>
<option value="MT">Mato Grosso</option>
<option value="MS">Mato Grosso do Sul</option>
<option value="MG">Minas Gerais</option>
<option value="PA">Pará</option>
<option value="PB">Paraíba</option>
<option value="PR">Paraná</option>
<option value="PE">Pernambuco</option>
<option value="PI">Piauí</option>
<option value="RJ">Rio de Janeiro</option>
<option value="RN">Rio Grande do Norte</option>
<option value="RO">Rondônia</option>
<option value="RS">Rio Grande do Sul</option>
<option value="RR">Roraima</option>
<option value="SC">Santa Catarina</option>
<option value="SE">Sergipe</option>
<option value="SP">São Paulo</option>
<option value="TO">Tocantins</option>
</select>
</span>
</p>
<p>
<label>Email:</label>
<span><input type="text" name="email" id="email" value="" alt="email" maxlength="100"></span>
</p>
<p>
<label> </label>
<span><input type="submit" name="btn_enviar" value="enviar" style="width:100px;"></span>
</p>
</fieldset>
</form>
</div>
</div>
<div id="div_direita">
<p><b>DESAFIO:</b></p>
<p>Validação de Campos em Formulário</p>
<p>
Obs.: Existem campos (CPF, RG e CEP) que não necessitam de verificações para verificar se o valor digitado é válido, apenas a verificação de que algo foi digitado
Estes campos devem possuir uma máscara (exemplo de máscara para CPF: xxx.xxx.xxx-dd)
</p>
<p>
Obs.: Do Participante<br>
O codigo foi criado na tentativa de atender apenas as especificacoes do torneio. Ignorando fatores de validacao importantes como
validacao numerica de CPF/CNPJ e existencia de valores para CEP.
</p>
<div id="msg_erros" style="display:none;"> </div>
</div>
</div>

<div style="width:90%; text-align:center; margin-top:10px; float:left;">
<a href="http://www.mariosam.com" title="Blog Desenvolvimento WEB">www.mariosam.com</a>
</div>

</body>
</html>

Esse plugin do wordpress de apresentação de código fonte as vezes apresenta algumas falhas, por isso vou disponibilizar também para download o arquivo compactado.

Arquivo com código fonte para download.

Bom, não tem muito mais o que falar, no próprio documento, assim como no fórum tem todas as funcionalidades que o código deve contemplar na validação básica de um formulário.

Algumas pessoas podem achar que o código ficou difícil de entender. Pois está usando expressões regulares nas validações. E para evitar amarrar o código ao formulário foi usado uma lógica mais genérica para que possa ser reutilizado em vários formulários. Foi necessário para deixar o código mais elegante e reutilizável.

E como eu sei que não agrado a gregos e troianos, e nem pretendo isso. Ao criticar o código por favor mostre algo melhor, afinal, eu também gosto de aprender.

Sucesso!



Sobre o Autor

MarioSAM é faixa preta 2Dan de Taekwondo. Entusiasta do marketing online. Especulador do mercado financeiro. Projetista web com certificação SCJP da SUN. Com 10 anos de experiência em desenvolvimento de sistemas.