Niceforms + Validate

[Marcelo Garbin 30]

Bom dia pessoal,

 

Estou com um problema aqui, gostaria de ter a ajuda de vocês.

 

Estou usando as seguintes bibliotecas em jquery: Niceforms & Jquery Validation.

 

As duas estão funcionando perfeitamente, porém estou com um problema na hora de validar os inputs.

 

Quando clico para enviar ele valida, porém a mensagem fica atrás dos inputs e deixa eles parados(digo não abrem espaço para a mensagem do erro).

 

Segue a imagem do meu problema:

 

Talvez seja algo em CSS, mas não consegui resolver isso.

 

Alguem pode me ajudar ?

 

Desde já agradeço pela atenção de todos.

 

Abraço

[William Bruno 1501]

é problema com css sim.

 

poste um link para sua página. Vou mover teu tópico.

[Marcelo Garbin 30]

é problema com css sim.

 

poste um link para sua página. Vou mover teu tópico.

 

 

Obrigado William Bruno,

 

Seguinte na verdade está num servidor local, vou postar aqui o código em CSS.

 

O Código HTML do form:

 <form id="login" name="form" action="" method="post" class="niceform">
         <fieldset>
           <div class="icon-login"></div><h2>Login</h2>
           <p>Autentique-se para acessar a Área Administrativa.</p>
           <div class="lcenter">
             <label for="login">
             <span>Usuário</span>
             <input name="login" type="text" class="test">
             </label> 
             <label for="senha">
             <span>Senha</span>
             <input name="senha" type="password">
             </label>  
           </div>
           <div style="float:right;display:table;position:relative;">
             <input name="Acessar" value="Acessar" type="submit" />
           </div>
         </fieldset>                  
       </form>

 

Código MEU código css:

<style type="text/css">
/*validate label*/
label{display:table;margin-top:5px;}
label.error { float: none; color: red; margin:0; vertical-align: top; font-size: 10px;max-width:150px; height:auto; width:auto;}
em {font-weight:bold;padding-right:1em;vertical-align:top;}

/* form */
#login{width:400px;height:253px;background:url(../imagens/bg-login.jpg) no-repeat;color:#FFF;display:block;position:absolute;top:120px;left:250px;}
#login fieldset{width:360px;height:auto;margin:0 auto;margin-top:20px;position:relative;display:block;border:none;}
#login label{display:table;margin:10px 0;}
#login label.error{float:none;color:#CCC;margin:0;vertical-align:top;font-size:10px;max-width:150px;height:auto;width:auto;padding:4px;}
#login span{display:table;float:left;width:55px;}
#login input[type="text"],input[type="password"]{width:150px;}
#login h2{font-family: Babylon5, "Arial Black", Gadget, sans-serif;letter-spacing:2px;font-size:24pt;line-height:50px;}
#login p{text-align:center;padding-bottom:5px;clear:both;}
#login .lcenter{display:table;position:relative;margin:0 auto;padding-top:5px;}
#login .icon-login{width:35px;height:40px;float:left;background:url(../imagens/icons/icone_logn.png) no-repeat;margin-right:5px;}
</script>

 

Código CSS do Niceforms:

<style type="text/css">
/*##########################################
Script: Niceforms 2.0
Theme: StandardBlue
Author: Lucian Slatineanu
URL: http://www.emblematiq.com/
##########################################*/

/*Text inputs*/
.NFText {border:none; vertical-align:middle; font:12px/15px Arial, Helvetica, sans-serif; background:none;}
.NFTextCenter {height:15px; background:url(img/red/input.png) repeat-x 0 0; padding:3px 0; margin:0; float:left; line-height:15px;}
.NFTextLeft, .NFTextRight {width:7px; height:21px; vertical-align:middle; float:left;}
.NFTextLeft {background:url(img/red/input-left.png) no-repeat 0 0;}
.NFTextRight {background:url(img/red/input-right.png) no-repeat 0 0;}
/*Radio*/
.NFRadio {cursor:pointer; position:absolute; display:block; width:13px; height:13px; border:1px solid transparent; background:url(img/red/radio.png) no-repeat 0 0; z-index:2;}
/*Checkbox*/
.NFCheck {cursor:pointer; position:absolute; width:12px; height:12px; border:1px solid transparent; background:url(img/red/checkbox.png) no-repeat 0 0; z-index:2;}
/*Buttons*/
.NFButton {width:auto; height:26px; color:#fff; padding:0 2px; background:url(img/red/button.png) repeat-x 0 0; cursor:pointer; border:none; font:10px/26px Tahoma, Arial, Helvetica, sans-serif; font-weight:bold; text-transform:uppercase; letter-spacing:1px; vertical-align:middle;}
.NFButtonLeft, .NFButtonRight {width:6px; height:26px; vertical-align:middle;}
.NFButtonLeft {background:url(img/red/button-left.png) no-repeat 0 0;}
.NFButtonRight {background:url(img/red/button-right.png) no-repeat 0 0;}
/*Textareas*/
.NFTextarea {border:none; background:none; font:12px/12px Arial, Helvetica, sans-serif; margin:0;}
.NFTextareaTop, .NFTextareaBottom {height:5px; clear:both; float:none; padding-right:10px;}
.NFTextareaTop {background:url(img/red/textarea-tr.png) no-repeat 100% 0;}
.NFTextareaBottom {background:url(img/red/textarea-br.png) no-repeat 100% 0; margin-bottom:5px;}
.NFTextareaTopLeft, .NFTextareaBottomLeft {width:5px; height:5px;}
.NFTextareaTopLeft {background:#f2f2e6 url(img/red/textarea-tl.png) no-repeat 0 0;}
.NFTextareaBottomLeft {background:#f2f2e6 url(img/red/textarea-bl.png) no-repeat 0 0;}
.NFTextareaLeft, .NFTextareaRight, .NFTextareaLeftH, .NFTextareaRightH {float:left; padding-bottom:5px;}
.NFTextareaLeft, .NFTextareaLeftH {width:5px;}
.NFTextareaLeft {background:url(img/red/textarea-l-off.png) repeat-y 0 0;}
.NFTextareaLeftH {background:url(img/red/textarea-l-over.png) repeat-y 0 0;}
.NFTextareaRight, .NFTextareaRightH {padding-right:5px; padding-bottom:0;}
.NFTextareaRight {background:url(img/red/textarea-r-off.png) repeat-y 100% 0;}
.NFTextareaRightH {background:url(img/red/textarea-r-over.png) repeat-y 100% 100%;}
/*Files*/
.NFFileButton {padding-bottom:0; vertical-align:bottom; cursor:pointer; background:url(img/red/file.png) no-repeat 0 0; width:60px; height:21px;}
.NFFile {position:relative; margin-bottom:5px;}
.NFFile input.NFhidden {position:relative; filter:alpha(opacity=0); opacity:0; z-index:2; cursor:pointer; text-align:left;}
.NFFileNew {position:absolute; top:0px; left:0px; z-index:1;}
/*Selects*/
.NFSelect {height:21px; position:absolute; border:1px solid transparent;}
.NFSelectLeft {float:left; width:3px; height:21px; background:url(img/red/select-left.png) no-repeat 0 0; vertical-align:middle;}
.NFSelectRight {height:21px; width:auto; background:url(img/red/select-right.png) no-repeat 100% 0; cursor:pointer; font:12px/21px Arial, Helvetica, sans-serif; color:#fff; padding-left:3px; margin-left:3px;}
.NFSelectTarget {position:absolute; background:none; margin-left:-13px; margin-top:18px; z-index:3; left:0; top:0; padding-bottom:13px;}
.NFSelectOptions {position:relative; background:#b32d2d; margin-left:16px; margin-top:0; list-style:none; padding:4px 0; color:#fff; font:11px/13px Arial, Helvetica, sans-serif; z-index:4; max-height:200px; overflow-y:auto; overflow-x:hidden; left:0; top:0;}
.NFSelectOptions li {padding-bottom:1px;}
.NFSelectOptions a {display:block; text-decoration:none; color:#fff; padding:2px 3px; background:none;}
.NFSelectOptions a.NFOptionActive {background:#840000;}
.NFSelectOptions a:hover {background:#F00;}
/*Multiple Selects*/
.NFMultiSelect {border:0; background:none; margin:0;}
.NFMultiSelectTop, .NFMultiSelectBottom {height:5px; clear:both; float:none; padding-right:10px;}
.NFMultiSelectTop {background:url(img/red/textarea-tr.png) no-repeat 100% 0;}
.NFMultiSelectBottom {background:url(img/red/textarea-br.png) no-repeat 100% 0; margin-bottom:5px;}
.NFMultiSelectTopLeft, .NFMultiSelectBottomLeft {width:5px; height:5px;}
.NFMultiSelectTopLeft {background:#f2f2e6 url(img/red/textarea-tl.png) no-repeat 0 0;}
.NFMultiSelectBottomLeft {background:#f2f2e6 url(img/red/textarea-bl.png) no-repeat 0 0;}
.NFMultiSelectLeft, .NFMultiSelectRight, .NFMultiSelectLeftH, .NFMultiSelectRightH {float:left; padding-bottom:5px;}
.NFMultiSelectLeft, .NFMultiSelectLeftH {width:5px;}
.NFMultiSelectLeft {background:url(img/red/textarea-l-off.png) repeat-y 0 0;}
.NFMultiSelectLeftH {background:url(img/red/textarea-l-over.png) repeat-y 0 0;}
.NFMultiSelectRight, .NFMultiSelectRightH {padding-right:5px; padding-bottom:0;}
.NFMultiSelectRight {background:url(img/red/textarea-r-off.png) repeat-y 100% 0;}
.NFMultiSelectRightH {background:url(img/red/textarea-r-over.png) repeat-y 100% 0;}
/*Focused*/
.NFfocused {border:1px dotted #666;}
/*Hovered*/
.NFh {background-position:0 100%;}
.NFhr {background-position:100% 100%;}
/*Hidden*/
.NFhidden {opacity:0; z-index:-1; position:relative;}
/*Safari*/
select, input, textarea, button {outline:none; resize:none;}
</style>

[André do Vale 76]

#login label.error{display:block;clear:both}

[Marcelo Garbin 30]

#login label.error{display:block;clear:both}

 

Olá André, obrigado pela resposta, mas não brilhou hehe...

 

Ta uma bruxaria isso aqui :o ... tentei alguns outros códigos e não tem jeito, acho que algo do CSS do Niceforms ta interferindo no restante, só não consegui descobrir ainda o que é...

 

Estou a espera de um milagre hehe.. alguem já fez validação no Naciforms ai? eu vi que tem outro tipo de validação que é com tooltip, mas não curti muito. Queria esse mais simples.

[André do Vale 76]

Inspeciona o elemento no painel de desenvolvimento do seu navegador favorito que fica fácil de você verificar o que está acontecendo realmente. Daí você contorna as regras no seu CSS.

 

Caso contrário, só um link demonstrando essa página é que conseguiremos ajudar.

[Marcelo Garbin 30]

Inspeciona o elemento no painel de desenvolvimento do seu navegador favorito que fica fácil de você verificar o que está acontecendo realmente. Daí você contorna as regras no seu CSS.

 

Caso contrário, só um link demonstrando essa página é que conseguiremos ajudar.

 

Opa, valeu pela dica André, não havia pensando nisso... Estou usando o Firebug...

 

Achei o que acontece, agora quero uma ajuda pra resolver isso hehe..

 

Olha só como fica o código:

 

<label for="login">
<span>Usuário</span>
<img class="NFTextLeft" src="js/niceforms/img/red/0.png">
<div class="NFTextCenter">
<input class="NFText error" type="text" name="login">
<label class="error" for="login" generated="true">* Campo Obrigatório!</label>
</div>
<img class="NFTextRight" src="js/niceforms/img/red/0.png">
</label>

 

Eu teria que tirar o

<label class="error" for="login" generated="true">* Campo Obrigatório!</label>

de dentro dessa

<div class="NFTextCenter">

como eu poderia fazer isso?

 

Será que tenho que mudar o código jquery? ou com css eu consigo isso?

 

Pois o label ficando dentro desta div o background da mesma fica "extendido" para o label. Mesmo eu colocando background:none para o label, pois é elemento da classe que está na div e não no label.

 

Alguma ajuda ai pessoal?

 

Desde já agradeço.

[André do Vale 76]

Esse Validate possui um callback? Se sim, você pode mover esse elemento .error quando ele aparecer, usando appendTo ou prependTo, por exemplo (jQuery).

[Marcelo Garbin 30]

Desisti do niceforms, não consegui implementar do jeito que gostaria.

Se alguem tiver algum dica de por um Jquery Validate com um form estilizado (cantos arredondados, etc), me de uma dica ou passe quais bibliotecas posso utilizar.

 

Grato a todos.