Javascript HTML5检查有效性和不可见字段

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

<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>

在

下一个按钮中单击
我正在检查表单是否有效，如下所示：

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

我注意到以下几点：


如果我在
Line1TextBox
中输入一些值并尝试提交表单，而
Line2TextBox
处于隐藏状态，则表单不会提交，因为表单无效（
checkValidity（）
返回false）
如果单击
复选框
以显示
Line2TextBox
，并在其中输入一些值，则表单已正确提交
如果我将
Line2TextBox
标记为禁用，并且没有输入任何值，则表单将被提交

我的问题是：

这是HTML5表单的默认行为吗（不可见的隐藏字段，但不是禁用的字段）
更重要的是，如何阻止HTML5验证不可见字段（我尝试使用
oninvalid
事件检查字段是否可见，
$（obj）.is（“：visible”）
，然后取消事件，但它不起作用）
我的目标是，如果字段不可见，则将其标记为有效，类似于以下内容，但我不知道将其写入何处（或将此代码附加到哪个事件）：

我想这些可能是我问题的合理答案：

验证不可见字段似乎很有意义。例如，如果某个字段由于位于手风琴控件或可折叠面板中而不可见，则应验证该字段
阻止HTML5验证不可见字段的一种方法是将它们标记为非必需字段。在我的情况下，当我选中/取消选中复选框时，我会执行以下操作：

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


因此，我想我现在将检查以下内容：

如何取消某个控件的验证
如何显示来自不可见字段的错误消息
添加Alexander Farkas的评论作为答案，因为它帮助了我（我的重点）：

添加/删除必需属性并不总是合适的，因为：

a） 还有其他可能的HTML5限制

b） 您不希望跟踪表单组中的所有这些元素

最好的方法是在元素本身或字段集元素上添加disabled属性

例如：

<fieldset disabled>
  <input type="text" name="foo" required />
</fieldset>


屏幕上未显示的字段不是隐藏类型，它只是未显示，因此它是完全正常的，并且经过验证。如果您需要自定义验证，您应该自己进行。关于禁用的字段，我甚至不认为它们的值已经提交，所以这是一个完美的逻辑，再次说明“yre”没有被验证。。。但是，您可以再次使用自定义验证来强制它。您能解释更多关于自定义验证的内容吗？我想要类似的东西（Obj.WaldValue＆O.$Obj.Is（”：“可见”））/ /取消验证事件，或者考虑Valdii更新的字段，以反映我的意思是“不可见字段”而不是隐藏字段。答案是迟的，但是添加/删除required属性并不合适，因为a）还有其他可能的HTML5约束，b）您不想跟踪表单组中的所有这些元素。最好的方法是在元素本身上启用disabled属性，或者在fieldset元素上启用更好的属性：
function Line2CheckBox_Chekced() {
    var isChecked = $("#Line2CheckBox").is(":checked");
    if (isChecked) {
         $("#Line2Panel").show();
         $("#Line2TextBox").attr("required", "");
    } else {
         $("#Line2Panel").hide();
         $("#Line2TextBox").removeAttr("required");
    }
}

<fieldset disabled>
  <input type="text" name="foo" required />
</fieldset>