如何在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

我想看到的输出

Invalid input: it need to be a amount

输入：

1.00

我想要的输出无错误消息

Answer 1

模式中有/ /-删除它们

此外，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>

Answer 2

如果您想显示消息，可以使用

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

为了隐藏它，你可以像这个一样

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