CSS no jQuery

Johan Guse · Março 13, 2008

Boa tarde....

Estou a desenvolver uma validacao de form com jQuery mas tem um porem o texto de validacao sempre aparece do lado do form... alguem sabe como passa pra baixo o erro?

Caso ng trabalhe com jquery, queria saber se tem uma tag que faz pular uma linha em css

Obrigado.

brcontainer · Março 13, 2008

ponha um link já ajuda a ver o que ocorre

falow abraço

Johan Guse · Março 13, 2008

<script>
$().ready(function() {
	// validate signup form on keyup and submit
	$("#atendimento").validate({
		rules: {
			nome: {
				required: true,
			},
			rg: {
				required: true,
			},
			nascimento: {
				required: true,
			},
			empresa: {
				required: true,
			},
			tipo: {
				required: true,
			},
			codigo: {
				required: true,
			},
			
		},
		messages: {
			nome: {
				required: "Digite o nome",
			},
			rg: {
				required: "Digite o RG",
			},
			nascimento: {
				required: "Digite a data de nascimento",
			},
			empresa: {
				required: "Digite o nome da empresa",
			},
			tipo: {
				required: "Selecione um tipo",
			},
			codigo: {
				required: "Digite o codigo",
			},
		}
	});

});
</script>
<div id="form">
<form name="atendimento" id="atendimento" method="get" action="">
	Nome:
  <br />
  <input name="nome" type="text" class="campos" id="nome" accesskey="e" />
  <br /><br />
	RG:
	<br />
	  <input name="rg" type="text" class="campos" id="rg" accesskey="r"  />
	  <br />
	  <br />
	Nacimento:
	<br />
	  <input name="nascimento" type="text" class="campos" id="nascimento" onKeyUp="formata(this);" maxlength="10" accesskey="a"/>
	  <br />
	  <br />
	  Empresa: <br />
	  <input name="empresa" type="text" class="campos" id="empresa" accesskey="e" />
	  <br />
	  <br />
	Tipo:
	<br />
	  <select name="tipo" class="validate-selection" id="tipo" accesskey="t">
		<option value="0">Pré admissional</option>
		<option value="1">Demissional</option>
		<option value="2">Periódico</option>
		<option value="3">Retorno ao Trabalho</option>
		<option value="4">Mudança de Função</option>
		<option value="5">Audiometria</option>
		<option value="6">Consulta</option>
	</select> 
	  <br />
	  <br />
	Codigo:
	<br />
	  <input name="codigo" type="text" class="campos" accesskey="c"/>
	  <br />
	  <BR />
	  <br />
	  <input type="submit" name="adicionar" id="adicionar" value="Adicionar Consulta" class="submit" accesskey="1" />
	  <input name="apagar" type="reset" value="Cancelar Consulta" accesskey="5" /> 
	</p>
</form>
</div>

Se fizeres uma validacao normal com jQuery vais ver que o erro aparece do lado do form, estou tentando fazer com que apareca do lado, deve de ser algo por css

abraco

brcontainer · Março 13, 2008

baixei o Jquery aqui mas ainda da erro de script não teria um link?

aproveite se der tire uma screen tambem

falow abraço ;)

Johan Guse · Março 13, 2008

Entao

esquece de por que uso um plug in extra que eh o http://bassistance.de/jquery-plugins/jquer...gin-validation/

Verifique na demo que o erro ao submit vaziu vem em baixo e vermelho.. pq o cara aplico um css aos campos fildset e label http://jquery.bassistance.de/validate/demo/

mas eu nao quero usar fildset nem label, pessoalmente nao gosto deles, entao essa eh minha dificuldade de passar o erro pra baixo

abraco

obrigado

brcontainer · Março 13, 2008

o nome da classe gerada é

class="error"

aplique isso no CSS

label.error{
clear:both;
}

mas eu nao quero usar fildset nem label, pessoalmente nao gosto deles, entao essa eh minha dificuldade de passar o erro pra baixo

antigamente eu não entendia essas TAGs tambem, mas percebi que para ser semântico deveria saber onde aplicar cada TAG e para que servem

acredite BR para essas coisa não é muito bom

estude sobre CSS e vera que essas TAGs podem ser bem mais uteis que os BRs

falow abraço ;)

Johan Guse · Março 13, 2008

huuum

certo... vou usar essas tags, axo que vou refazer o html... alias eh bem simples

neste code nada mudou o clear:both;

valeu obrigado!

brcontainer · Março 13, 2008

faça algo assim, pois as vezes sem LABEL e FIELDSET o HTML não valida no W3C

CSS:

#form fieldset{
border:0;
}

html:

<fieldset>
<label for="nome">
nome:
</label>
<input type="text" name="nome" />

<label for="senha">
senha:
</label>
<input type="text" name="senha" />
</fieldset>

busque aqui no forum em alguns tópicos tem exemplos

no Google tem bastante ;)

Johan Guse · Março 13, 2008

Muito obrigado mesmo....

oproveitando o topico, como que eu passo o label pra baixo?

#atendimento label{
	clear:both;
}

assim nao rola...

usando BR ele pula a linha, mas nao quero mais o BR agora

heehhe

abrax

Johan Guse · Março 13, 2008

alias...

como você postou acima

label.error{

clear:both;

}

tb nao funciona, esse code nao eh so em caso de div que ai passa pra baixo?

brcontainer · Março 13, 2008

Não tirei os BRs por que não sei ao certo o que você quer ;)

mas aplique Labels

CODE

<style>
#form{

width:400px;

}

#form fieldset{

border:0;

}

#form .inputs{

width:170px;

}

#form input{

clear:both;

}

label.error{

position:none;

clear:both;

}

</style>

<script>

$().ready(function() {

    // validate signup form on keyup and submit

    $("#atendimento").validate({

        rules: {

            nome: {

                required: true,

            },

            rg: {

                required: true,

            },

            nascimento: {

                required: true,

            },

            empresa: {

                required: true,

            },

            tipo: {

                required: true,

            },

            codigo: {

                required: true,

            },
 
        },

        messages: {

            nome: {

                required: "Digite o nome",

            },

            rg: {

                required: "Digite o RG",

            },

            nascimento: {

                required: "Digite a data de nascimento",

            },

            empresa: {

                required: "Digite o nome da empresa",

            },

            tipo: {

                required: "Selecione um tipo",

            },

            codigo: {

                required: "Digite o codigo",

            },

        }

    });
 
});

</script>

<div id="form">

<form name="atendimento" id="atendimento" method="get" action="">

<fieldset class="inputs">

    Nome:

  <br />

  <input name="nome" type="text" class="campos" id="nome" accesskey="e" />

  <br /><br />

    RG:

    <br />

      <input name="rg" type="text" class="campos" id="rg" accesskey="r"  />

      <br />

      <br />

    Nacimento:

    <br />

      <input name="nascimento" type="text" class="campos" id="nascimento" onKeyUp="formata(this);" maxlength="10" accesskey="a"/>

      <br />

      <br />

      Empresa: <br />

      <input name="empresa" type="text" class="campos" id="empresa" accesskey="e" />

      <br />

      <br />

    Tipo:

    <br />

      <select name="tipo" class="validate-selection" id="tipo" accesskey="t">

        <option value="0">Pré admissional</option>

        <option value="1">Demissional</option>

        <option value="2">Periódico</option>

        <option value="3">Retorno ao Trabalho</option>

        <option value="4">Mudança de Função</option>

        <option value="5">Audiometria</option>

        <option value="6">Consulta</option>

    </select>

      <br />

      <br />

    Codigo:

    <br />

      <input name="codigo" type="text" class="campos" accesskey="c"/>

      <br />

      <BR />

      <br />

</fieldset>

<fieldset>

      <input type="submit" name="adicionar" id="adicionar" value="Adicionar Consulta" class="submit" accesskey="1" />

      <input name="apagar" type="reset" value="Cancelar Consulta" accesskey="5" />

    </p>

</form>

</div>

falow abraço

Johan Guse · Março 13, 2008

Foi mal, ta ai uma img, eu simplesmente quero mudar a parte de error, por ela pra baixo do form... e o label ( que eh o nome de cada form pra cima )

novo codigo:

<!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>Atendimento</title>

<script type="text/javascript" src="../jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="../jquery/jquery.validate.js"></script>
<script type="text/javascript" src="../js/atendimento.js"></script>
<style type="text/css">
body {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	font-size: 12px;
}
#form {
	
	padding: 10px 0px 0px 5px;
	margin : 0px 0px 0px 0px;

}
#titulo p {
 	font-size:15px; 
 	text-align:center;
 	font-weight:bold;
 	background:#6cb0f7;
	color:#FFFFFF; 
	margin-bottom:1px;

}
#help {
float: right;
}
#logo {
	padding: 10px 0px 0px 0px;
	margin : 0px 0px 0px 0px;
}
#icons {
	padding: 8px 3px 1px 20px;
	margin : 0px 0px 0px 0px;
}
#icon {
padding: 8px 3px 1px 20px;
float: left;
}
#form fieldset{
border:0;
padding: 10px 0px 0px 5px;
	margin : 0px 0px 0px 0px;
}
#atendimento label{
	clear:both;
}
/* dados */
.tabelas{
  border-color: #6cb0f7;
  border-style: solid;
  border-width: 1px;
  }
  .tabelas th, .tabelas td{
  border-color: #6cb0f7;
  border-style: solid;
  border-width: 1px;
}#trTitConsulta{
  background-color: #6cb0f7;
  color: #FFFFFF;
  height: 25px;
  font-weight: bold;
}
#trTit{
  background-color: #CCCCCC;
  height: 20px;
  font-weight: bold;
}
#trResultado{
  background-color: #EFEFEF;
}
/* fim */
form.atendimento fieldset fieldset label {
	display: block;
	width: auto;
}
form.atendimento fieldset p {
	list-style: none;
	padding: 5px;
	margin: 0;
}
form.atendimento label.error {
	margin-left: 103px;
	width: 220px;
	clear:both;
	background-color:#0066FF;
}
form.atendimento label.error, label.error {
	/* remove the next line when you have trouble in IE6 with labels in list */
	color: red;
	font-style: italic
}
form.atendimento fieldset p, form.atendimento fieldset fieldset {
	padding: 5px 10px 7px;
}
div.error { display: none; }
input {	border: 1px solid black; }
input:focus { border: 1px dotted black; }
input.error { border: 1px dotted red; }
form.atendimento .gray * { color: gray; }
#atendimento { width: 500px; }
#atendimento label { clear:both; width: 250px; }
#atendimento label.error, #atendimento input.submit { padding: 5px 10px 7px; }
p { margin: 10px 0; }
</style>
</head>

<body>
<div id="titulo">
<p>Nova Consulta</p>
</div>
<div id="help">
	<div id="logo">
	<img src="../imgs/logo.JPG" width="214" height="169" />
	</div>
	<div id="icons">
		<div id="icon">
		 <a href="principal.html" accesskey="v"><img src="../imgs/back_icon.gif" alt=" <- Voltar " width="19" height="20" border="0" /></a></div>
		<div id="icon">
		<a href="principal.html" accesskey="f"><img src="../imgs/faq2.gif" alt="  F.A.Q.  " border="0" /></a></div>
		<div id="icon">
		<a href="principal.html" accesskey="s"><img src="../imgs/icon_chat.gif" alt="  Suporte On-line  " width="32" height="32" border="0" /></a></div>
	</div>
</div>

<div id="form">
<fieldset>
<form name="atendimento" id="atendimento" method="get" action="">
		<p><label for="nome">Nome:</label>
		  <input name="nome" type="text" class="campos" id="nome" accesskey="e" />
		  <input type="button" name="novo2" id="novo2" value="Cadastrar nova" onClick="MM_openBrWindow('pop_cadastrar_pessoa.html','cadpessoa','width=350,height=300')" />
	</p>
		<p><label for="rg">RG:</label>
		  <input name="rg" type="text" class="campos" id="rg" accesskey="r"  />
	</p>
		<p>Nacimento:<br />
		  <input name="nascimento" type="text" class="campos" id="nascimento" onKeyUp="formata(this);" maxlength="10" accesskey="a"/>
	</p>
		<p>Empresa:<br /> 
		  <input name="empresa" type="text" class="campos" id="empresa" accesskey="e" />
		  <input type="button" name="novo" id="novo" value="Cadastrar nova" onClick="MM_openBrWindow('pop_cadastrar_empresa.html','cadempersa','width=350,height=380')"/>
	</p>
		<p>Tipo:
		  <br />
		  <select name="tipo" class="validate-selection" id="tipo" accesskey="t">
			  <option value="0">Pré admissional</option>
			  <option value="1">Demissional</option>
			  <option value="2">Periódico</option>
			  <option value="3">Retorno ao Trabalho</option>
			  <option value="4">Mudança de Função</option>
			  <option value="5">Audiometria</option>
			  <option value="6">Consulta</option>
										  </select> 
	</p>
		<p>Codigo:<br />
		  <input name="codigo" type="text" class="campos" accesskey="c"/>
		  </p>
		<p>
		  <input type="submit" name="adicionar" id="adicionar" value="Adicionar Consulta" class="submit" accesskey="1" />
		  <input name="apagar" type="reset" value="Cancelar Consulta" accesskey="5" /> 
		  
														</p>
</form>
</fieldset>
</div>

<table border="1" align="center" cellpadding="2" cellspacing="0" class="tabelas">
  <tr id="trTitConsulta">
	<td colspan="3" align="center"><strong>Consultas Pendentes</strong></td>
  </tr>
  <tr id="trTit">
	<td align="center">Nome</td>
	<td align="center">Pendencia(s)</td>
	<td align="center">Ações</td>
  </tr>
  <tr>
	<td>João da Silva</td>
	<td>Exame de Sangue</td>
	<td><select name="laboratorio" class="campos">
			<option value="0" selected="1">Encaminhar</option>
			<option value="1">KG</option>
			<option value="2">Dona Helena</option>
		</select>
		<input type="Submit" value="Remover"/>
	</td>
  </tr>
  <tr id="trResultado">
	  <td>Maria da Silva</td>
	<td>Concluido</td>
	<td><input type="Submit" value="Remover"/></td>
  </tr>
</table></form>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();	// We only create one object of this class
messageObj.setShadowOffset(5);	// Large shadow


function displayMessage(url)
{
	
	messageObj.setSource(url);
	messageObj.setCssClassMessageBox(false);
	messageObj.setSize(400,200);
	messageObj.setShadowDivVisible(true);	// Enable shadow for these boxes
	messageObj.display();
}

function displayStaticMessage(messageContent,cssClass)
{
	messageObj.setHtmlContent(messageContent);
	messageObj.setSize(300,150);
	messageObj.setCssClassMessageBox(cssClass);
	messageObj.setSource(false);	// no html source since we want to use a static message here.
	messageObj.setShadowDivVisible(false);	// Disable shadow for these boxes	
	messageObj.display();
	
	
}

function closeMessage()
{
	messageObj.close();	
}


  </script>
</p>
</body>
</html>

o campo nome e rg esta com label, mas fica ao lado do form, ja os erros sempre do lado, come que faz pra por o erro pra baixo e os titulos que usarem label pra cima

chegamos ao ponto que eu queria, enfim rsrs

:D

brcontainer · Março 13, 2008

você quer todos os erros vão para baixo do form tudo separado dos inputs?

<form>

--------

inputs

--------

</form>erros

é isso?

ps.: não use esses atributos

border="1"
align="center"
cellpadding="2"
cellspacing="0"
colspan="3"

procure fazer via o proprio css

falow abraço ;)

Johan Guse · Março 13, 2008

e isso!

que os textos em italico aparecam em baixo do input

vou arruma essas tags

mt obrigado!

brcontainer · Março 13, 2008

mas foi o que eu fiz no POST#11 deste tópico testa lá eu apliquei dois <filedset> e usei eles para alinhas os inputs com os ERROs

qualquer coisa não for isso ponha uma screen do que você quer

falow abraço ;)

Arquivado

CSS no jQuery

Recommended Posts

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Johan Guse 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

brcontainer 16

Compartilhar este post

Link para o post

Compartilhar em outros sites

Adiciona entrada em dicionario por variavel

JAVASCRIPT - Comparar Data Digitada com Data Atual

Search Prettys Girls from your town for night - Live Women

Fóruns

Tempo Real

Informação importante