Conflito: JQuery Validation + Bootstrap 3 Tooltip
Olá pessoal!
Estou com um conflito entre o JQuery Validation e o Bootstrap Tooltip, de forma que quando envio o formulário vazio e o Validation entra em ação, e o Tooltip aparece com o focus no input, a cada vez que o input perde o foco e recebe novamente, a mensagem de validação é repetida uma linha abaixo, indefinidamente. Por favor, gostaria de alguma dica, pois não estou conseguindo resolver este conflito!
Obrigado.
Segue o código abaixo:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Cadastrar usuário</title>
<meta charset='utf-8' />
<script src='https://code.jquery.com/jquery-3.2.1.min.js' integrity='sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=' crossorigin='anonymous'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.0/jquery.validate.min.js'></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class='container'>
<br />
<div class='panel panel-primary'>
<div class='panel-heading'>
<h4 class='panel-title'>Cadastrar usuário</h4>
</div>
<div class='panel-body'>
<form action='' method='post' class='form-horizontal' id='form-cadastro'>
<div class='form-group'>
<div class='col-md-12'>
<label>Nome completo</label>
<input type='text' class='form-control informa' id='nome' name='nome' data-toggle='tooltip' title='Mínimo 6 caracteres' minlength='6' required />
</div>
</div>
<div class='form-group'>
<div class='col-md-12'>
<label>Nome de usuário</label>
<input type='text' class='form-control informa' id='login' name='login' data-toggle='tooltip' title='Mínimo 4 caracteres' minlength='4' required />
</div>
</div>
<div class='form-group'>
<div class='col-md-12'>
<label>Criar uma senha</label>
<input type='password' class='form-control informa' id='senha' name='senha' data-toggle='tooltip' title='Mínimo 4 caracteres' minlength='4' required />
</div>
</div>
<div class='form-group'>
<div class='col-md-12'>
<label>Confirme a senha</label>
<input type='password' class='form-control' id='confirma' name='confirma' required />
</div>
</div>
<div class='text-right'>
<a href='inicio.php'><button type='button' class='btn btn-default' id='botao'>Cancelar</button></a>
<input type='submit' name='cadastrar' class='btn btn-primary' value='Criar cadastro' />
</div>
</form>
</div>
</div>
</div>
<br />
<script type='text/javascript'>
$.validator.setDefaults();
$(document).ready(function () {
//Tooltip
$('[data-toggle=\'tooltip\']').tooltip({animation: true, placement: 'bottom', trigger: 'focus'});
//Validator
$('#form-cadastro').validate({
rules: {
confirma: {
equalTo: '#senha'
}
},
messages: {
nome: 'Este campo é obrigatório.',
login: 'Por favor, digite um nome de usuário válido.',
senha: 'Por favor, digite uma senha.',
confirma: 'Por favor, repita a senha.'
},
errorElement: 'em',
errorPlacement: function (error, element) {
// Add the `help-block` class to the error element
error.addClass('help-block');
error.insertAfter(element);
},
highlight: function (element, errorClass, validClass) {
$(element).parents('.col-md-12').addClass('has-error').removeClass('has-success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents('.col-md-12').addClass('has-success').removeClass('has-error');
}
});
});
</script>
</body>
</html>
**CSS:**
/* Tooltip */
.informa + .tooltip > .tooltip-inner {
background-color: #222;
color: #fff;
border: 1px solid #222;
padding-top: 0px;
padding-bottom: 2px;
padding-left: 4px;
padding-right: 4px;
font-family: Verdana, sans-serif;
font-size: 10px;
}
.informa + .tooltip.bottom > .tooltip-arrow {
border-bottom: 5px solid #222;
}
.tooltip {
left: 15px !important;
}
/* Error message */
.error {
font-family: Verdana, sans-serif;
font-size: 10px;
font-style: inherit;
}Discussão (5)
Carregando comentários...