How to show tippy.js tooltip after failed form validation

Question

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>

Answer 1

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>

How to show tippy.js tooltip after failed form validation

Question

1 answers

solution1
1 ACCPTED 2020-04-30 18:13:56

How to show tippy.js tooltip after failed form validation

Question

1 answers

solution1 1 ACCPTED 2020-04-30 18:13:56

solution1
1 ACCPTED 2020-04-30 18:13:56