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标记为已禁用且未设置任何值，则表单已提交。

我的问题是：

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

我的目标是，如果该字段是不可见的，那么将其标记为有效，类似于以下内容，但我不知道在哪里写它（或者我应该附加此代码的事件）：

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

Answer 1

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

验证隐形字段是有意义的。例如，如果某个字段因为处于折叠控制或可折叠面板中而不可见，则应对其进行验证。

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

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

所以我想我现在将检查以下内容：

如何取消某个控件的验证？
如何显示隐藏字段的错误消息？

Answer 2

添加亚历山大·法卡斯（Alexander Farkas）的评论作为答案，因为它帮助了我（强调我的观点）：

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

a）还有其他可能的HTML5约束。

b）您不想跟踪表单组中的所有那些元素。

最好的方法是在元素本身或fieldset元素上添加禁用的属性

示例：

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

HTML5 checkValidity和Invisible Fields

2 个答案: