0
I have a conflict between Jquery Validation and Bootstrap Tooltip, so when I send the empty form and Validation goes into action, and Tooltip appears with Focus in input, each time the input loses focus and receives again, the validation message is repeated one line below, indefinitely. Please, I would like some hint, as I am not managing to resolve this conflict! Thank you.
$.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');
}
});
});
/* 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;
}
<!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 />
</body>
</html>
:/ Didn’t work.
– user69944