HTML5 必需属性 - div 中的约束验证？

Question

给定一个包含 2 个 div 的表单，每个 div 都包含一个带有“必需”属性的 asp 文本框，是否可以将 html5 必需属性限制为仅在包含文本框的 div 中考虑？因此，例如，当您单击第二个 div 中的按钮时，我可以在第一个 div 中的文本框上设置未验证的必需属性吗？我应该补充一点，我正在尝试在内容页面中执行此操作。

<form>
    <div>
        <asp:textbox runat="server" id="TextBox1" required="required"></asp:textbox>
        <asp:button runat="server" id="Button1" text="Save"  />
        <asp:button runat="server" id="Button2" text="Cancel"  onclientclick="return false" />
    </div>
    <div>
        <asp:textbox runat="server" id="TextBox2" required="required"></asp:textbox>
        <asp:button runat="server" id="Button3" text="Save"  />
        <asp:button runat="server" id="Button4" text="Cancel"  onclientclick="return false" />
    </div>
</form>

Answer 1

标准的 html5 验证没有内置选项“如果此输入符合要求，则使此输入为非必需”。为了在单个表单中完成此操作，您将需要编写非常少量的 JavaScript 以在当前文本输入满足您的要求时从其他文本输入中删除 required 属性，否则表单将无法通过客户端-侧面验证和其他文本输入将匹配 :invalid 伪类。

我建议切换到一个 jquery 插件，例如 http://www.formvalidator.net，它不需要你编写任何代码。您可以使用上述插件中的data-validation-depends-on 等html 属性来完成此操作。