[Resolvido] Validação de Campos no formulário

Essa validação é muito legal, ela está otimizada e bem inteligente, não sendo necessário colocar uma função para cada campo, economizando bastante tempo de desenvolvimento.

Ela foi desenvolvida pelo amigo: FABIANO AMARAL SIMÕES, excelente programador

O mais interessante é que a função vai rastrear todos os campos na página do estilo input, select, textarea e checkboxes e verificar se tem algum campo com o nome que informou como obrigatório.

Código Java Script:

<script language="javascript">
 //Informe todos os ID dos campos que deseja ser obrigatório
 var fieldsSource = new Array("txtNome", "txtNascimentoDia", "txtCampo1", "txtCampo2", "txtCampo3");
 function getFieldsFromSource(objSubmitButton)
 {
 var qtdErrors = 0;
 var qtdErrorsGroup = 0;
 var arrObjStarToHide = new Array();
 var arrObjects = new Array();
 var inputs = document.getElementsByTagName("input");
 var selects = document.getElementsByTagName("select");
 var textAreas = document.getElementsByTagName("textarea");

 for( var i=0; i<inputs.length; i++ )
 arrObjects.push(inputs[i]);
 for( var i=0; i<textAreas.length; i++ )
 arrObjects.push(textAreas[i]);
 for( var i=0; i<selects.length; i++ )
 arrObjects.push(selects[i]);

 // loop nos campos de texto
 for( var i=0; i<arrObjects.length; i++ )
 {
 for( var j=0; j<fieldsSource.length; j++ )
 {
 if( arrObjects[i].name.indexOf(fieldsSource[j]) >= 0 )
 {
 if( (!trim(arrObjects[i].value) && (arrObjects[i].type.toLowerCase() != "checkbox")) || ((arrObjects[i].type.toLowerCase() == "checkbox") && !arrObjects[i].checked) )
 {
 try
 {
 if( document.getElementById(fieldsSource[j] + "_dot").name != "" )
 {
 document.getElementById(document.getElementById(fieldsSource[j] + "_dot").name).style.visibility = "visible";
 qtdErrorsGroup++;
 }
 else
 document.getElementById(fieldsSource[j] + "_dot").style.visibility = "visible";
 qtdErrors++;
 }
 catch(e)
 {
 try
 {
 document.getElementById(fieldsSource[j] + "_dot").style.visibility = "visible";
 qtdErrors++;
 }
 catch(e)
 {}
 }

 try
 {
 if( document.getElementById(fieldsSource[j] + "_dot_or").name != "" )
 {
 document.getElementById(document.getElementById(fieldsSource[j] + "_dot_or").name).style.visibility = "visible";
 qtdErrorsGroup++;
 }
 else
 document.getElementById(fieldsSource[j] + "_dot_or").style.visibility = "visible";
 }
 catch(e)
 {
 try
 {
 document.getElementById(fieldsSource[j] + "_dot_or").style.visibility = "visible";
 }
 catch(e)
 {}
 }
 }
 else
 {
 // tratamento de erro dos elementos onde pelo menos um tem que estar preenchido
 try
 {
 //se pelo menos um elemento está preenchido ou checado, não há erros. deve-se esconder a estrela
 if( document.getElementById(fieldsSource[j] + "_dot_or").name != "" )
 arrObjStarToHide.push(document.getElementById(document.getElementById(fieldsSource[j] + "_dot_or").name));
 }
 catch(e)
 {}

 try
 {
 if( qtdErrorsGroup == 0 )
 document.getElementById(document.getElementById(fieldsSource[j] + "_dot").name).style.visibility = "hidden";

 qtdErrorsGroup = 0;
 }
 catch(e)
 {}
 }
 }
 }
 }

 //escondendo estrelas de erro dos elementos de grupos exclusivos (onde basta um elemento do grupo estar preenchido para remover o erro).
 for( var z=0; z<arrObjStarToHide.length; z++ )
 arrObjStarToHide[z].style.visibility = "hidden";

 if( (qtdErrors > 0) || (arrObjStarToHide.length == 0) )
 {
 document.getElementById("spanErrorMsg").innerHTML = "Preencha corretamente os campos destacados.";
 return false;
 }
 else
 {
 document.getElementById("spanErrorMsg").innerHTML = "";
 objSubmitButton.style.display = "none"; // Desabilita o botão de submit. Isso previne cliques indesejados do usuário
 return true;
 }
 }

 //retira espaços em branco da string
 function leftTrim(sString)
 {
 while (sString.substring(0,1) == ' ')
 {
 sString = sString.substring(1, sString.length);
 }
 return sString;
 }
 function rightTrim(sString)
 {
 while (sString.substring(sString.length-1, sString.length) == ' ')
 {
 sString = sString.substring(0,sString.length-1);
 }
 return sString;
 }
 function trim(sString)
 {
 while (sString.substring(0,1) == ' ')
 {
 sString = sString.substring(1, sString.length);
 }
 while (sString.substring(sString.length-1, sString.length) == ' ')
 {
 sString = sString.substring(0,sString.length-1);
 }
 return sString;
 }
</script>

**Apresentação do * caso não esteja preenchido:**

*Atenção, o _dot é necessário para localização do campo que você referenciou lá em cima no JS.

<span id="txtCampo1_dot" style="color:Red;visibility:hidden;">*</span>
Apresentação da mensagem de erro: [Preencha corretamente os campos destacados.] Caso precise alterar a mensagem de erro localize no código java script

<span id="spanErrorMsg" style="color:Red;"></span>
Como fica a apresentação no campo:

para ASP.NET

<asp:TextBox runat="server" ID="txtCampo1"/><span id="txtCampo1_dot" name="txtCampo1_dot" style="color:Red;visibility:hidden;">*</span>
para HTML

<input type="text" ID="txtCampo1"><span id="txtCampo1_dot" name="txtCampo1_dot" style="color:Red;visibility:hidden;">*</span>
Além disso a aplicação está preparada para trabalhar com GRUPOS de Campos com 2 situações

SITUAÇÃO 1 - "X" campos precisam estar preenchidos com apresentação de apenas 1 asterisco ( Exemplo: DDD e Telefone )

Asterisco do grupo telefone:

<span id="telefone_dot" style="color:Red;visibility:hidden;">*</span>
Asteriscos dos campos individualmente:Atenção: veja que nestes SPAN foi colocado o NAME do grupo para se referenciarem.

****

<span id="txtTelefoneDDD_dot" name="telefone_dot">*</span>
<span id="txtTelefone_dot" name="telefone_dot">*</span>

Os dois campos sendo verificados com a apresetação de apenas 1 asterisco:

<asp:TextBox runat="server" ID="txtTelefoneDDD" />
<asp:TextBox runat="server" ID="txtTelefone" />
SITUAÇÃO 2 - "X" campos mas apenas um deles precisa estar preenchido ( Exemplo: 2 Chekbox, qualquer um deles precisa ser preenchido )

Asterisco do grupo TodosCkb

Atenção: veja que nestes SPAN foi colocado o NAME do grupo para se referenciarem.

<span id="TodosCkb_dot_or" style="color:Red;visibility:hidden;">*</span>

CheckBox para validações

<asp:CheckBox ID="ckb1" runat="server" text="" /><span id="ckb1_dot_or" name="TodosCkb_dot_or"></span>
<asp:CheckBox ID="ckb2" runat="server" text="" /><span id="ckb2_dot_or" name="TodosCkb_dot_or"></span>

No seu botão de SUBMIT não esqueça de adicionar:

OnClientClick="java script: return getFieldsFromSource();"
Bom trabalho,

Espero ter ajudado,

Abraços,

Cattani