HTML5的checkValidity和不可见字段

Question

HTML5的checkValidity和不可见字段

4

我有一个简单的表单，如下所示：

<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

- sh_kamalh

屏幕上未显示的字段并非隐藏类型，而只是未显示，因此正常情况下也将进行验证。如果需要自定义验证，则应自行设置。对于已禁用的字段，我甚至认为它们的值都未被提交，因此它们不会被验证......但是，您可以通过自定义验证来强制执行。 - Laurent S.

请问您能否更详细地解释一下自定义验证，我想要像这样的东西：if (obj.willValidate && !$(obj).is(":visible")) //取消验证事件或将字段视为有效。 - sh_kamalh

我更新了问题，以反映我的意思是不可见字段而不是隐藏字段。 - sh_kamalh

2个回答

1

因为Alexander Farkas的评论对我很有帮助（重点是我的），所以将其添加为答案：

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

a）存在其他可能的HTML5约束。

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

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

例如：

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

- AGB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sh_kamalh · Accepted Answer

我认为以下是对我的问题的合理回答：

It mekes sense to validate invisible fields. For example if a field is invisible because it is in an accordion control or in a collapsible panel, it should be validated.

One way to stop HTML5 from validating invisible fields is to mark them as not required. In my case when I check / uncheck the CheckBox I do the following:

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

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

如何取消特定控件的验证？
如何从不可见字段显示错误消息？