Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Indicador de campos obrigatórios

Por , em Desenvolvimento frontend

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

Pessoal,

 

A ideia é que o usuário saiba quais são os campos obrigatórios ao bater o olho. Antes de submeter o form. Mas não queria ter que "marcar" manualmente os campos obrigatórios.

 

Quero saber se há uma forma em HTML 5 e/ou CSS de criar um indicador de que o campo é requerido.

Quero sinalizar no label do respectivo controle.

Isso é um modelo de campo do form.

        <label for="evento" title="Evento" accesskey="E">Evento</label>
          <input type="text" name="evento" id="evento" tabindex="1" autocomplete="off" required autofocus/>

 

Até posso fazer manualmente, adicionando um simples asterisco no texto dentro do label.

<label for="evento" title="Evento" accesskey="E"> * Evento</label>

Tem como fazer algo similar de forma "automática" caso o input esteja definido como required???

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis.Santos    7

Denis.Santos
Postado 



 


Você pode fazer isso usando HTML5 e CSS3, no input você coloca: required


 


 


no css você faz:


 


Pra quando o campo estiver inválido


 


input:invalid + .aviso:after{
        position: absolute;
        content: "!";
        color: #f00;
        font: bold normal 1em sans-serif;
        left: 190px;
    }


 


 


 


Pra quando estiver válido:


 


 


input:valid + .aviso:after{
        position: absolute;    
        content: "OK";
        color: #199a31;
        font: bold normal 1em sans-serif;
        left: 190px;
    }


Se tiver alguma dúvida é só dizer.


 




Esqueci de dizer, depois do input é necessário acrescentar um span


 


<span class="aviso"></span>


 


é ele que exibirá o aviso.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
FabianoSouza
			  

	
		
	
			 5
	
		
	

		

		

			


	
		FabianoSouza
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Opa! É disso que tô precisando.


Bom, ocorreu um comportamento estranho.


 


Ao que parece, o aviso só aparece uma vez por cada FIELDSET. Não está aparecendo para os demais campos...



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Denis.Santos
			  

	
		
	
			 7
	
		
	

		

		

			


	
		Denis.Santos
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Dá para você usar com vários fieldset sim, é só vc especificar a estrutura


#formContato #fieldset1 input:invalid + .aviso:after, 
    #formContato #fieldset2 input:invalid + .aviso:after{
        position: absolute;
        content: "!";
        color: #f00;
        font: bold normal 1em sans-serif;
        left: 190px;
    }


 


Não sei como está a sua estrutura, mas acho que vendo esse exemplo você conseguirá adaptar.



Qualquer coisa posta o código do seu form completo.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
FabianoSouza
			  

	
		
	
			 5
	
		
	

		

		

			


	
		FabianoSouza
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Olá Denis.


Cara, fiz uns testes aqui e blz! O negócio funfa legal... mas somente em input.


Veja meu código. Tentei aplicar também num select e não funfou.


 


Gostaria de fazer funcionar em todas as tags de formulário: os inputs (number, text, date e etc), radio, checkbox e textearea.


 


Pode dar este help? 


 


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>
<style>
input:invalid + .aviso:after{
        position: absolute;
        content: "!";
        color: #f00;
        font: bold normal 1em sans-serif;
        left: 190px;
    }
input:valid + .aviso:after{
        position: absolute;    
        content: "OK";
        color: #199a31;
        font: bold normal 1em sans-serif;
        left: 190px;
    }


select:invalid + .aviso:after{
        position: absolute;
        content: "!";
        color: #f00;
        font: bold normal 1em sans-serif;
        left: 190px;
    }

</style>
<form id="formContato">
<fieldset id="fieldset1">

<label for="campo"></label>
<input type="text" id="campo" name="campo" required><span class="aviso"></span><br>


<label for="campo3"></label>
<input type="text" id="campo3" name="campo3"><span class="aviso"></span><br>

<label for="campo4"></label>
<input type="text" id="campo4" name="campo4"><span class="aviso"></span><br>


<label for="modalidade"></label>
<select name="modalidade" id="modalidade" tabindex="3" required><span class="aviso"></span><br>
			<option value="">Selecione...</option>
		</select>


</fieldset> 
</form>
</body>
</html>




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Denis.Santos
			  

	
		
	
			 7
	
		
	

		

		

			


	
		Denis.Santos
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Boa noite Fabiano!


 


Para adaptar para os outros campos você terá que colocar os tipos de dados a serem validados, já apliquei em radio, date, email, select e funcionou.


 


Por exemplo:


 




#conteudoCadastroCli #formCadastroCli select:invalid + .aviso:after{
    position: absolute;
        content: "!";
        color: #f00;
        font: bold normal 1em sans-serif;
        left: 420px;
}

#conteudoCadastroCli #formCadastroCli select:valid + .aviso:after{
        position: absolute;
        content: "OK";
        color: #199a31;
        font: bold normal 1em sans-serif;
        left: 420px;
    }



 





O seu span no select tem que vir depois da tag que o fecha, arruma isso no seu código e testa novamente,



Verifiquei novamente o seu CSS e ele está certo, o erro está no HTML na parte do span mesmo.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
andersonseifert
			  

	
		
	
			 10
	
		
	

		

		

			


	
		andersonseifert
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Porque nao faz dessa forma :


 


 <label for="evento" title="Evento" accesskey="E">Evento (*)</label>
          <input type="text" name="evento" id="evento" tabindex="1" autocomplete="off" required/>




			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito