Conflict: JQuery Validation + Bootstrap 3 Tooltip

Navigation
0

I'm having a conflict between JQuery Validation and the Bootstrap Tooltip, so when I submit the empty form and Validation takes action, the Tooltip appears with the focus on input, each time the input loses focus and receives again, the validation message is repeated one line down, indefinitely. Please, I would like some tips, because I can not solve 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>
    
asked by anonymous 23.05.2017 / 19:25

2 answers

0

In your ErrorPlacement try to put like this: 

errorPlacement: function (error, element) {
  $('#form-cadastro #'+element.attr('name')+'-error').remove(); // para remover o item caso ele ja tenha, ai logo abaixo adiciona.

  error.addClass('help-block');
  error.insertAfter(element);
},
    
23.05.2017 / 20:23
0

Thank you, Douglas! Your code did not work for me, but I adapted it according to your idea and it worked ... conflict solved! Gratitude and embrace.

My solution was: 

errorPlacement: function (error, element) {
  $('[data-toggle=\'tooltip\']').removeAttr('name');
  error.addClass('help-block');
  error.insertAfter(element);
},
    
23.05.2017 / 22:28
Popover Compound - Submit does not work Error connecting database (Fatal error: Uncaught Error: Call to undefined function mysql_connect () in) [duplicate]