如果表单输入的验证失败(在下面的示例中,任何<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>
答案 0 :(得分: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>