CODEWITHSUNDEEP
javascripthtmljquerytippyjs
JSRB
JSRB

Reputation: 2613

How to show tippy.js tooltip after failed form validation

I would like to make a tippy tooltip show up if the validation of a form's input failed (in the example below anything < 0). I tried it with "focus" trigger but then the problem is that it also shows up as soon as the user focuses the form to make any input at all. Sames goes for "click" trigger.

Any other solution to this?

This is the related documentation:

Tippy.js docu / triggers

$( document ).ready(function() {

    // Floating Balance Form
    $("#formInputFloatingBalance").attr({
        min: 0,
        step: 0.01,
        required: true,
        autofocus: true,
    });
});

// Create new tippy, trigger in this case is "focusin"

new tippy("#formInputFloatingBalance", {
    content: "Please enter a balance greater than 0",
    theme: "CFD",
    inertia: true,
    animation: "scale",
    placement: "bottom",
    trigger: "focusin",
    duration: [100, 0],
});

// Validate form input and show tippy in case of failed validation

var validBalance = $("#formInputFloatingBalance")[0].checkValidity();
if (validBalance == false) {
      $("#formInputFloatingBalance").focus();
}
#formInputFloatingBalance {
font-family: 'Varela Round', sans-serif;
    font-size: 1vw;
    color: #22225B;
    width: 15%;
    height: 8vh;
    border-radius: 6px;
    border-width: 2px;
    border-color: #8892b7;
    text-align: center;
    cursor: crosshair;
    font-weight: bold;
}

.formMain input::placeholder {
  color: rgba(110, 125, 156, 0.47);
  font-size: 0.9em;
  font-style: italic;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <body>
 
<div class="balanceContainer">
      <input type="number" id="formInputFloatingBalance" class="formInputTopRow">
</div>

<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>                        

  </body>
</html>

Upvotes: 1

Views: 1472

Answers (1)

Danziger
Danziger

Reputation: 21161

Just create the tooltips after doing the validation checks:

const balanceInput = document.querySelector('#formInputFloatingBalance');
const validationButton = document.querySelector('#validationButton');

validationButton.onclick = () => {
  const balance = parseInt(balanceInput.value, 10);

  // Make sure you delete any previous Tippy or you will end up with
  // a bunch of them on the same element:
  
  // See https://github.com/atomiks/tippyjs/issues/473.
  
  Array.from(document.querySelectorAll('input')).forEach(node => {  
    if (node._tippy) node._tippy.destroy();
  });
  
  // Valiadte and create Tippy if needed:

  if (isNaN(balance) || balance < 0) {
    new tippy("#formInputFloatingBalance", {
      content: "Please enter a balance greater than 0",
      theme: "CFD",
      inertia: true,
      animation: "scale",
      placement: "bottom",
      trigger: "focusin",
      duration: [100, 0],
    });

    balanceInput.focus();
  }
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/@popperjs/core@2"></script>
<script src="https://unpkg.com/tippy.js@6"></script>                        
 
<div class="balanceContainer">
  <input type="number" id="formInputFloatingBalance" />
  
  <button id="validationButton">Validate</button>
</div>

Upvotes: 1

Related Questions