Conflict: Jquery Validation + Bootstrap 3 Tooltip

Asked

Viewed 585 times

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>

jquery twitter-bootstrap jquery-validate tooltip

2 answers

0

In his erroPlacement tries to put so: 

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);
},

  • :/ Didn’t work.

0

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

My solution was:

errorPlacement: function (error, element) {
  $('[data-toggle=\'tooltip\']').removeAttr('name');
  error.addClass('help-block');
  error.insertAfter(element);
},

  • Putz... seemed to have solved, but no! Solved with the blank form, but when it is filled it is very bad again. :/

Browser other questions tagged jquery twitter-bootstrap jquery-validate tooltip

You are not signed in. Login or sign up in order to post.