我有一个简单的表单,如下所示:
<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