0

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.

$.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> 

2 Respostas 2

0

No seu erroPlacement tenta colocar assim:

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);
},
1
  • :/ Não funcionou.
    – user69944
    Commented 23/05/2017 às 19:14
0

Muito obrigado, Douglas! O seu código não deu certo comigo, mas adaptei-o conforme a sua ideia e funcionou... conflito resolvido! Gratidão e abraço.

Minha solução foi:

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

1
  • Putz... parecia ter resolvido, mas não! Resolveu com o formulário em branco, mas quando é preenchido fica bem ruim novamente. :/
    – user69944
    Commented 24/05/2017 às 17:26

Você deve fazer log-in para responder a esta pergunta.