我是C#的新手,我正在尝试找出表单验证。 更具体地说,我有一个webform(C#),我将其拆分为“form-part-1”和“form-part-2”部分。
默认情况下,“form-part-2”被隐藏。完成“form-part-1”中的所有字段后,您应该可以通过单击“Continue”linkButton继续“form-part-2”。
jQuery部分运行良好,根据需要显示和隐藏表单部分。 但验证不再强制执行。
我有验证器,但此时我可以进入“form-part-2”而不填写“form-part-1”字段。
我希望在继续“form-part-2”之前执行验证。
如果有任何提示和建议,将不胜感激。
提前致谢。
这是我的代码:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#continue").click(function (event) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
});
});
</script>
<form id="SignUp" method="post" runat="server">
<table id="validation">
<tr>
<td colspan="2" vAlign="top">
<asp:ValidationSummary ID="vsSignupValidation" runat="server"></asp:ValidationSummary></td>
</tr>
</table>
<table id="form-part-2">
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupFirstName" Runat="server">First Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupFirstName" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupLastName" Runat="server">Last Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupLastName" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
</table>
<!-- validate and continue -->
<asp:LinkButton ID="continue" runat="server" onclientclick="return false;">Continue</asp:LinkButton>
<!-- validate and continue -->
<table id="form-part-1">
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupUserID" Runat="server">UserID:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupUserID" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:label id="lblSignupPassword" Runat="server">Last Name:</asp:label>
<span style="color:red">*</span>
</label>
</td>
<td>
<asp:TextBox size="30" CssClass="input" ID="txtSignupPassword" TabIndex="1" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="150">
<label class="">
<asp:Label class="formtxtsm" ID="lblSignupConfirmPassword" runat="server">Confirm password</asp:Label>
<span style="color:red">*</span>
</label></td>
<td>
<asp:TextBox size="30" ID="txtSignupConfirmPassword" TabIndex="10" runat="server" TextMode="Password" CssClass="input"></asp:TextBox>
</td>
</tr>
</table>
<!-- validators -->
<asp:requiredfieldvalidator id="rfvSignupFirstName" runat="server" Display="None" ControlToValidate="txtSignupFirstName" class="formerrortxt" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupLastName" runat="server" Display="None" ControlToValidate="txtSignupLastName" class="formerrortxt" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:RequiredFieldValidator ID="rfvSignupUserID" runat="server" Display="None" ControlToValidate="txtSignupUserID" ErrorMessage='"Username" is required.'></asp:RequiredFieldValidator>
<asp:requiredfieldvalidator id="rfvSignupPassword" runat="server" Display="None" ControlToValidate="txtSignupPassword" ErrorMessage='"Password" is required.'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="rfvSignupConfirmPassword" runat="server" Display="None" ControlToValidate="txtSignupConfirmPassword" ErrorMessage='"Confirm password" is required.'></asp:requiredfieldvalidator>
<asp:customvalidator id="cvSignupPasswordMatch" runat="server" Display="None" ErrorMessage='"Password" and "Confirm password" must match exactly.'></asp:customvalidator>
</form>
**** 编辑:
谢谢Phx&amp;丹尼尔的反馈意见。很有帮助! 我有一个例外工作。在我进入第2步之前,“form-part-2”字段得到验证。任何提示如何在我到达“form-part-2”之后验证用户名/密码字段?提前谢谢!
这是我最近的版本: www.smithy.somee.com
和代码:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
if (Page_ClientValidate("personalGroup")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
if (Page_ClientValidate("accountGroup")) {
$('#form-part-2').hide();
}
});
</script>
<form id="signup" runat="server">
<div>
<table id="validators">
<tr>
<td>
<asp:ValidationSummary ID="personalGroupSummary" runat="server" ValidationGroup="personalGroup" />
<asp:ValidationSummary ID="accountGroupSummary" runat="server" ValidationGroup="accountGroup" />
</td>
</tr>
</table>
<table id="form-part-1">
<tr>
<td>First Name:</td>
<td><asp:TextBox ID="txtFname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Last Name:</td>
<td><asp:TextBox ID="txtLname" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="continue" runat="server" causesvalidation="true" validationgroup="personalGroup" Text="Continue" />
</td>
</tr>
</table>
<table id="form-part-2">
<tr>
<td>Username:</td>
<td><asp:TextBox ID="txtUser" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPass" runat="server"></asp:TextBox></td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" validationgroup="accountGroup" Text="Submit" OnClick="btnSubmit_Click" />
</td>
</tr>
</table>
<!-- output -->
<table>
<tr>
<td>First: </td>
<td><asp:Label ID="lblFname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Last:</td>
<td><asp:Label ID="lblLname" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>User:</td>
<td><asp:Label ID="lblUser" runat="server" Text=""></asp:Label></td>
</tr>
<tr>
<td>Pass:</td>
<td><asp:Label ID="lblPass" runat="server" Text=""></asp:Label></td>
</tr>
</table>
</div>
<!-- validators -->
<asp:requiredfieldvalidator id="fvFname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtFname" ErrorMessage='"First Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvLname" runat="server" validationgroup="personalGroup" Display="None" ControlToValidate="txtLname" ErrorMessage='"Last Name" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvUser" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtUser" ErrorMessage='"Username" is required'></asp:requiredfieldvalidator>
<asp:requiredfieldvalidator id="fvPass" runat="server" validationgroup="accountGroup" Display="None" ControlToValidate="txtPass" ErrorMessage='"Password" is required'></asp:requiredfieldvalidator>
<!-- validators -->
</form>
答案 0 :(得分:1)
正如您所写:我希望在继续执行&#34; form-part-2&#34; 之前执行验证。
您需要创建验证组才能验证前N个字段和另外N个字段。 因此,为您的控件创建验证组:
http://msdn.microsoft.com/en-us/library/vstudio/ms227424(v=vs.100).aspx
<asp:textbox id="AgeTextBox"
runat="Server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator2"
controltovalidate="AgeTextBox"
validationgroup="PersonalInfoGroup"
errormessage="Enter your age."
runat="Server">
</asp:requiredfieldvalidator>
<!--When Button1 is clicked, only validation
controls that are a part of PersonalInfoGroup
are validated.-->
<asp:button id="Button1"
text="Validate"
causesvalidation="true"
validationgroup="PersonalInfoGroup"
runat="Server" />
<asp:textbox id="CityTextBox"
runat="Server">
</asp:textbox>
<asp:requiredfieldvalidator id="RequiredFieldValidator3"
controltovalidate="CityTextBox"
validationgroup="LocationInfoGroup"
errormessage="Enter a city name."
runat="Server">
</asp:requiredfieldvalidator>
<!--When Button2 is clicked, only validation
controls that are a part of LocationInfoGroup
are validated.-->
<asp:button id="Button2"
text="Validate"
causesvalidation="true"
validationgroup="LocationInfoGroup"
runat="Server" />
然后为每个组使用不同的验证摘要。
也许您需要一个按钮用于每个验证,但您可以使用相同的按钮进行多个验证组:
这里的另一个例子 http://www.codeproject.com/Tips/401611/Validate-multiple-Validation-group-both-client-and
答案 1 :(得分:1)
Phx给出了部分答案。使用他的建议来创建ValidationGroups。将第1部分和第2部分中的所有验证器放在不同的组中。
JQuery不会自动触发验证。
您需要使用JavaScript手动调用验证。这可以通过调用Page_ClientValidate
来完成,$("#continue").click(function (event) {
if (Page_ClientValidate("group1")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
});
将验证传递的ValidationGroup的所有验证器。
例如:
{{1}}