Веб-форма Asp.net с проверкой флажка не работает
У меня есть веб-форма с 5-6 полями ввода с проверкой, которая работала нормально, и теперь мне нужно добавить флажок для T&C, и форма не должна отправляться, если флажок T&C не установлен.
Ниже для простоты я приведу часть своего кода, поэтому я удалил некоторые входные данные, чтобы сделать его кратким.
я использую OnClientClick="ClientSideClick(this)"
функция для проверки правильности, чтобы отключить кнопку отправки для множественной отправки.
эта форма работает, и если я не проверяю флажок проверки, но когда я пытаюсь проверить и если "Page_ClientValidate" истинно, он никогда не проверяет часть кода для проверки флажка. Я пытался разместить код в другом месте, но это сработало. не то, что я делаю неправильно
<asp:Label ID="lblFirstName" runat="server" CssClass="row-label" Text="First Name:"></asp:Label>
<asp:TextBox ID="txtFirstName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfFN" runat="server" ValidationGroup="VG" ErrorMessage="*" ControlToValidate="txtFirstName" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:Label ID="Label2" runat="server" CssClass="row-label" Text="Last Name:"></asp:Label>
<asp:TextBox ID="txtLastName" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvtxtLastName" runat="server" ValidationGroup="VG" ErrorMessage="*" ControlToValidate="txtLastName" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:Label ID="lblEmail" runat="server" CssClass="row-label" Text="E-mail:"></asp:Label>
<asp:TextBox ID="txtEmail" runat="server" CssClass="row-input"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" runat="server" ValidationGroup="VG" ErrorMessage="*" ControlToValidate="txtEmail" Display="Dynamic"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="revEmail" runat="server" ErrorMessage="*" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" ValidationGroup="VG" Display="Dynamic"></asp:RegularExpressionValidator>
<asp:CheckBox ID="chkIAgreeSub" runat="server" /> I agree to Terms & condition
<asp:Button ID="btnSave" runat="server" CssClass="btn btn-submit" Text="Submit" OnClick="btnSave_Click" OnClientClick="ClientSideClick(this)" UseSubmitBehavior="False" ValidationGroup="VG" />
<script type="text/javascript">
//Avoid Multiple Submission
function ClientSideClick(myButton) {
// Client side validation
if (typeof (Page_ClientValidate) == 'function') {
if (Page_ClientValidate() == false)
{
console.log("VALIDATION FALSE");
return false;
}
else
{
console.log("VALIDATION TRUE");
if (document.getElementById("<%=chkboxTC.ClientID %>").checked == true) {
console.log("T&C checked TRUE");
return true;
} else {
console.log("T&C NOT checked FALSE");
return false;
}
}
}
if (myButton.getAttribute('type') == 'button') {
// diable the button
myButton.disabled = true;
myButton.value = "Processing...";
}
return true;
}
</script>
1 ответ
Ваш код не работает, потому что asp:CheckBox
получить как
<label id="the_long_webforms_id">
<input type="checkbox"/>
I agree to Terms & condition
</label>
Итак, линия
document.getElementById("<%=chkboxTC.ClientID %>").checked
выходит из строя. Вам понадобится что-то вроде
// provided a class from the checkbox from preventing using the client id
// then took the child that is input:checkbox of the label
e.IsValid = document.querySelector('.agree-terms input').checked;
Более простой метод будет использовать это
<asp:CheckBox ID="chkIAgreeSub" runat="server"
CssClass="agree-terms"
Text="I agree to Terms & condition">
</asp:CheckBox>
<asp:CustomValidator ID="CheckBoxRequired" runat="server"
EnableClientScript="true"
ErrorMessage="You must select this box to proceed"
ValidationGroup="VG"
ClientValidationFunction="CheckBoxRequired_ClientValidate">
</asp:CustomValidator>
JavaScript
function CheckBoxRequired_ClientValidate(sender, e)
{
e.IsValid = document.querySelector('.agree-terms input').checked;
//e.IsValid = jQuery(".agree-terms input:checkbox").is(':checked');
}