HTML5复选框组验证

HTML5 Validation of Checkbox Groups

本文关键字:验证 复选框 HTML5      更新时间:2023-09-26

I<3在浏览器中进行验证,而不是使用特定于框架的东西。使用element.setCustomValidity可以更改工具提示中显示的消息。它非常适合每个元素,但我不知道如何处理复选框组。

假设你有三个复选框,你必须选择2个。所需的结果是使工具提示围绕该集,指示用户在继续操作之前拾取2。

html5是如何允许这样做的?这就是我一直害怕的,非典型的用例,以及如何使其与其他验证行为协同工作,这非常棒(首先关注无效字段、工具提示、输入按键提交)。

想法?

下面是一个片段示例。

<form>
Choose your favorite two stooges.
<label>Moe</label><input type="checkbox" name="stooges">
<label>Larry</label><input type="checkbox" name="stooges">
<label>Curley</label><input type="checkbox" name="stooges">
<label>Yes, I have agreed to this</label><input required name="ack">
<button>Submit</button>
</form>

我将运行一个函数,该函数遍历所有复选框,并且只有在选中2个复选框时才返回true。

因此,工具提示可以在开头显示2,然后显示1,如果不需要继续操作的复选框,则可以将复选框呈现为绿色,或者如果用户尝试在没有2个复选框的情况下继续操作,则可以使复选框呈现红色