Ir para conteúdo

POWERED BY:

Arquivado

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

LucasCairesF

formulário

Por , em Desenvolvimento frontend

Recommended Posts

LucasCairesF    8

LucasCairesF
Postado

Galera preciso de uma ajudinha '-'

bom eu to com um formulário e gostaria que quando um campo nao tivesse preenchido ficasse com uma borda vermelha exemplo esse código:

 

 

 
<style>
 
#input {background:#fff; width:200px;  height:40px; border:2px  #00FF00 solid;} 
 
#input_b {background:#fff; width:200px; height:40px; border:2px  FF0000 solid;} 
 
</style>


/*Essa seria a input que estaria correta depois que clicar no submit*/
 
<div id="input"></div>
 
<div style="height:5px;"></div>
 
/*Essa seria a input que estaria com algum erro... */
 
<div id="input_b"></div>



Bom, se vcs puderem me passar algum site que explique ou até me passar algum código eu ficaria grato!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Keven Jesus_164006    39

Keven Jesus_164006
Postado

atah é uma mensagem de aviso rsrrs não é que o input ta preenchido ele fz uma div ou personalizou um alerta rsrs

 

você pode fazer usando js ou direto no php dependendo do seu codigo, posta ele ai a parte onde verifica no php

 

vc verifica

 

 

if(empty($campotal)){

 echo '<span class="alerta error">Ops! o campo tal deve ser preenchido</span>';
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

EduardoAugustoPHP    27

EduardoAugustoPHP
Postado

Você quer fazer esa verificação em qual momento?

No momento do envio(submit) do formulário ou na troca de campo (blur)?

 

Caso você queira fazer isso no momento do envio, deve usar javascript para primeira validação e depois uma validação no servidor. Veja se o código abaixo te dá uma luz:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
	#envia{margin:10px 0px;}
	input{height:30px;}
	.vazio{border:1px solid red;}
</style>
</head>

<body>
<div id="envia">
	<form name="form" id="form" method="post" action="#">
	<input type="text" id="valida_envio" />
    <input type="submit" value="vai" />
    </form>
</div>

<div id="blur">
		<input type="text" id="valida_blur" />
        <input type="text" id="trocado" />
</div>
<script type="text/javascript">
	$(document).ready(function() {	
        $("#form").submit(function(){
			input = $('#valida_envio').val();
				if(input == ""){
						$("#valida_envio").addClass('vazio');
						return false;
					}else{
						return true;	
					}
		
			})
		$("#valida_blur").blur(function(){
				if($("#valida_blur").val() == ""){
						$("#valida_blur").addClass('vazio');
					}
			})
    });
	
</script>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Denis.Santos    7

Denis.Santos
Postado

Tem como você fazer isso usando alguns dos novos recursos de HTML5 e CSS3.

 

Nos campos do formulários que vc quer que sejam preenchidos vc coloca dentro do input:

 

required

 

No arquivo CSS, você faz o seguinte:

 

#conteudoContato #formContato input:invalid + .aviso:after{

aqui você coloca os efeitos que deseja

}

 

Quando o arquivo tiver sido preenchido, você pode mudar a aparência dele usando:

 

#conteudoContato #formContato input:valid + .aviso:after{

aqui você coloca os efeitos que deseja

}

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