如何在 javascript 中隐藏或显示验证错误

Question

我试图解决 frontendmentor.io 的挑战，我必须在其中制作小费计算器。 输入已准备好，但我无法进行验证。

有人告诉我使用 aria 标签来隐藏和显示错误并将我指向此页面： https://www.a11yproject.com/posts/how-to-write-accessible-forms/

但作为给出的示例，我没有使用提交按钮。 所以我的问题是如何在 javascript 的帮助下显示或隐藏我的自定义错误消息。

输入字段的代码可以在这里找到：

 const money = document.getElementById("amount"); money.addEventListener('blur', (e) => { let checked = money.checkValidity(); console.log(checked); });

 <label for="amount">Bill</label> <p class="hint" id="usernameHint">Invalid input: it need to be an amount</p> <div class="amount_input"> <img src="./images/icon-dollar.svg"> <input type="text" id="amount" value="0" pattern="/(?=.*?\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$/" /> <div aria-live="assertive" id="message"></div> </div>

输入无效

a

想看的output

Invalid input: it need to be a amount

输入：

1.00

我想要的 Output 没有错误信息

Answer 1

如果你想显示你可以使用的消息

document.getElementById('yourID').style.display = 'block'";

为了隐藏它，你可以这样做

document.getElementById('yourID').style.display = 'none'";

Answer 2

你有/ /在模式中 - 删除它们

checkValidity 也不返回值

这将起作用

 const message = document.getElementById("usernameHint"); const money = document.getElementById("amount"); money.addEventListener('blur', (e) => { money.checkValidity(); let checked = money.validationMessage.trim() message.hidden = checked === ""; console.log(checked, money.validationMessage) }); money.addEventListener('focus', (e) => { document.getElementById("usernameHint").hidden = true; });

 <label for="amount">Bill</label> <p class="hint" id="usernameHint" hidden>Invalid input: it need to be an amount</p> <div class="amount_input"> <img src="./images/icon-dollar.svg"> <input type="text" id="amount" value="0" pattern="(?=.*?\d)^\$?(([1-9]\d{0,2}(,\d{3})*)|\d+)?(\.\d{1,2})?$" /> <div aria-live="assertive" id="message"></div> </div>