表單驗證失敗后如何顯示tippy.js工具提示

Question

如果表單輸入的驗證失敗（在下面的示例中，任何 < 0），我想顯示一個提示工具提示。 我用“焦點”觸發器嘗試了它，但問題是它也會在用戶聚焦表單以進行任何輸入時顯示出來。 同樣適用於“點擊”觸發器。

還有其他解決方案嗎？

這是相關文檔：

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

只需在進行驗證檢查后創建工具提示：

 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>

表單驗證失敗后如何顯示tippy.js工具提示

問題描述

1 個解決方案

解決方案1
1 已采納 2020-04-30 18:13:56

表單驗證失敗后如何顯示tippy.js工具提示

問題描述

1 個解決方案

解決方案1 1 已采納 2020-04-30 18:13:56

解決方案1
1 已采納 2020-04-30 18:13:56