javascript - HTML5 checkValidity 和不可见字段

Question

我有一个简单的表格如下:

<form id="form1" runat="server">
    <div>
        Line 1: <asp:TextBox ID="Line1TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        <br />
        Fill Line 2? <asp:CheckBox ID="Line2CheckBox" runat="server" OnClick="Line2CheckBox_Chekced();"  />
        <br />
        <div ID="Line2Panel" style="display: none;">
            Line 2: <asp:TextBox ID="Line2TextBox" runat="server" placeholder="e.g. Street 9" required ></asp:TextBox>
        </div>
        <asp:Button ID="NextButton" runat="server" Text="Next" OnClientClick="return NextButton_Click();" />        
    </div>
</form>

Line2CheckBox 使用以下脚本切换 Line2Panel:

function Line2CheckBox_Chekced() {
     $("#Line2Panel").toggle();
}

在 NextButton_Click 中，我检查表单是否有效，如下所示:

function NextButton_Click() {
    if ($('#form1')[0].checkValidity()) {
        alert("from is valid");
   } else {
        alert("from is NOT valid");
   }
}

我注意到以下几点:

• 如果我在 Line1TextBox 中输入一些值并尝试提交表单，而 Line2TextBox 被隐藏，则表单不会被提交，因为表单无效 (checkValidity() 返回 false。
• 如果我单击 CheckBox 以显示 Line2TextBox 并在其中输入一些值，则表单已正确提交。
• 如果我将 Line2TextBox 标记为已禁用且未输入任何值，则会提交表单。

我的问题是:

1. 这是 HTML5 表单的默认行为吗(不可见的隐藏字段但不是禁用字段)？
2. 更重要的是，如何阻止 HTML5 验证不可见字段(我尝试使用 oninvalid 事件来检查该字段是否可见，$(obj).is(":visible")，然后取消事件但没有成功)？

我的目标是，如果该字段是不可见的，则将其标记为有效，如下所示，但我不知道将其写入何处(或者我应该将此代码附加到哪个事件):

if (obj.willValidate && !$(obj).is(":visible")) 
    //cancel the validation event or consider the field as valid

Answer 1

我认为这些可能是我的问题的合乎逻辑的答案:

1. 验证不可见字段很有意义。例如，如果一个字段因为在 Accordion 控件或可折叠面板中而不可见，则应该对其进行验证。

2. 阻止 HTML5 验证不可见字段的一种方法是将它们标记为不需要。在我的例子中，当我选中/取消选中 CheckBox 时，我执行以下操作:

   function Line2CheckBox_Chekced() {
       var isChecked = $("#Line2CheckBox").is(":checked");
       if (isChecked) {
            $("#Line2Panel").show();
            $("#Line2TextBox").attr("required", "");
       } else {
            $("#Line2Panel").hide();
            $("#Line2TextBox").removeAttr("required");
       }
   }
   

所以我想我现在要检查以下内容:

1. 如何取消某个控件的验证？
2. 如何显示来自不可见字段的错误消息？