如何在表单验证失败后显示 tippy.js 工具提示

Question

如果表单输入验证失败（在下面的示例中任何 < 0），我想显示一个尖锐的工具提示。我用 "focus" 触发器尝试了它，但问题是它也会在用户聚焦表单以进行任何输入时立即显示。 Sames 用于 "click" 触发器。

还有其他解决方案吗？

这是相关文档：

$( 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 工具提示

How to show tippy.js tooltip after failed form validation

html

javascript

jquery

tippyjs