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

[CezarCattani 0]

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