[Resolvido] Validate + Twitter Bootstrap

[glaucoheitor 0]

Olá. Conheço bem pouco de JS, mas estava tentando organizar um validade em conjunto com o Bootstrap que estou utilizando.

 

O que não estou conseguindo é utilizar a função highlight para que quando o usuário mude de campo ele mude de cor de acordo com a validação.

 

Alguém pode dar um help?

 

O site é: http://moviefreaks.com.br/sgcg/cadastro.php

 

Obrigado!

 

                <div class="span10">
                   <div class="well">
					<form class="form-horizontal" id="cadastro" method='post' action=''>
						<fieldset>

						<legend><h3>Cadastro</h3></legend>

						<div class="control-group">
						<label class="control-label"><strong>Nome</strong></label>
						<div class="controls">
						<input type="text" class="input-xxlarge" id="nome" name="nome">
						</div>
						</div>


						<div class="control-group">
						<label class="control-label"><strong>E-mail</strong></label>
						<div class="controls">
						<input type="text" class="input-xlarge" name="email">
						</div>
						</div>

						<div class="control-group">
							<div class="control-group"><label class="control-label"><strong>Endereço</strong></label></div>
							<label class="control-label">CEP</label> 
							<div class="controls"><input type="text" class="input-small" name="cep" id="cep" size="9" maxlength="8" onBlur="getEndereco()"/></div>
							<label class="control-label">Logradouro</label>
							<div class="controls"><input type="text" class="input-xxlarge" name="rua" id="rua" maxlength="140"/></div>
							<label class="control-label">Número</label>
							<div class="controls"><input type="text" class="input-mini" name="n" id="n" maxlength="8"/></div>
							<label class="control-label">Complemento</label>
							<div class="controls"><input type="text" class="input-xlarge"input name="compl" id="compl" maxlength="60"/></div>
							<label class="control-label">Bairro</label>
							<div class="controls"><input type="text" class="input-large"input name="bairro" id="bairro" maxlength="50"/></div>
							<label class="control-label">Cidade</label>
							<div class="controls"><input type="text" class="input-large" name="cidade" id="cidade" maxlength="30"/></div>
							<label class="control-label">Estado</label>
							<div class="controls"><input type="text" class="input-mini" name="estado" id="estado" maxlength="2"/></div></div>

						<div class="control-group">
						<label class="control-label"><strong>Senha</strong></label>
						<div class="controls"><input type="password" class="input-large"input name="senha" id="senha" maxlength="30"/></div>
						</div>

						<div class="control-group">
						<label class="control-label"><strong>Confirmar senha</strong></label>
						<div class="controls"><input type="password" class="input-large"input name="csenha" id="senha" maxlength="30"/></div>
						</div>

						<div class="control-group">
						<label class="control-label"><strong></strong></label>
						<div class="controls">
						<hr>
						<br>
							<input class="btn btn-primary btn-large" type="submit" value="Enviar" />
						</div>
						</div>

						</fieldset>
						</form>

                   </div>
               </div>
	    </div>
       </div>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#cadastro").validate({
	// Define as regras
	rules:{
		nome: {
			required: true, minlength: 3
		},
		email: {
			required: true, email: true
		},
		senha: {
			required: true,
			minlength: 5
		},
		csenha: {
			required: true,
			minlength: 5,
			equalTo: "#senha"
		},
	},
	// Define as mensagens de erro para cada regra
	messages:{
		nome:{
			required: "Digite o seu nome",
			minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
		},
		email:{
			required: "Digite o seu e-mail para contato",
			email: "Digite um e-mail válido"
		},
	}
	errorClass:'error',
   validClass:'success',
   errorElement:'span',
   highlight: function (element, errorClass, validClass) 
   { 
       $(element).parents("div.control-group")
                 .removeClass(validClass)
			  .addClass(errorClass); 

   }, 
   unhighlight: function (element, errorClass, validClass)
   {
       $(element).parents(".error")
                 .removeClass(errorClass)
                 .addClass(validClass); 
   }
});
});
</script>

[glaucoheitor 0]

Consegui arrumar, alterei o final do script para:

 

highlight: function(label) {
		$(label).closest('.control-group').removeClass('success').addClass('error');
	},
	success: function(label) {
		label
			.text('OK!').addClass('valid')
			.closest('.control-group').removeClass('error').addClass('success');

[Tiago Augusto Figueiredo 0]

Glauco Show seu formulário,

 

tentei implementar mas não estou obtendo resultado, poderia postar para Donwload os fontes e os arquivos js ou enviar para meu email tiagostrokes@gmail.com

 

 

 

 

muito obrigado.