I am completely new to C# and I am trying to figure out form validation.
More specifically, I have a webform (C#) that I've split into to parts "form-part-1" and "form-part-2".
By default "form-part-2" is hidden. Once all fields in "form-part-1" are completed, you should be able to proceed to "form-part-2" by clicking on the "Continue" linkButton.
The jQuery part works well, showing and hiding form sections as desired.
But the validation is not enforced anymore.
I have validators in place but at this point I can proceed to "form-part-2" without filling out the "form-part-1" fields.
I would like the validation to be enforced before proceeding to "form-part-2".
Any tips and suggestions how to do it would be greatly appreciated.
Thanks in advance.
Here's my code:
<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>
**** EDIT:
Thanks Phx & Daniel for your feedback. Very helpful!
I got things working with one exception. The "form-part-2" fields get validated before I even get to the step 2. Any tips how to validate the username / password fields only after I get to the "form-part-2"? Thanks in advance!
here's my most recent version:
www.smithy.somee.com
and the code:
<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>
As you wrote: I would like the validation to be enforced before proceeding to "form-part-2".
You need to create validations groups in order to validate first N fields and the another N Fields.
So create Validation groups for your controls:
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" />
Then use a Diferent validation summary for each group.
Perhaps you need a button for each validation but you can do the trick and use the same button for multiple validation groups:
http://www.aspsnippets.com/Articles/Validate-Multiple-Validation-Groups-with-one-Button-in-ASPNet.aspx
Another example here
http://www.codeproject.com/Tips/401611/Validate-multiple-Validation-group-both-client-and
Phx gives a partial answer. Use his suggestion to create ValidationGroups. Put all your validators in part 1 and part 2 in separate groups.
JQuery does not automatically trigger validation.
You need to call the validation manually with your JavaScript. This can be done by calling Page_ClientValidate which will validate all validators for the passed ValidationGroup.
For example:
$("#continue").click(function (event) {
if (Page_ClientValidate("group1")) {
$('#form-part-1').hide();
$('#form-part-2').fadeIn();
}
});
Related
File Upload Not working in update Panel I also tried triggers but it also not working KINDLY RESOVE MY ISSUE
***<%# Page Title="Pharmacy Orders" Theme="DefaultTheme" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="OnlinePharmacyOrders.aspx.cs" Inherits="Forms_Online_OnlinePharmacyOrders" %>
<asp:Content ID="Content1" ContentPlaceHolderID="CPH_Header" runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="CPH_Menus" runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="CPH_Content" runat="Server">
<asp:UpdatePanel ID="UP_PharmacyOrder" runat="server" ChildrenAsTriggers="True" UpdateMode="Conditional">
<ContentTemplate>
<ProgressTemplate>
<div class="UpdateProgress">
<img src="../../App_Themes/DefaultTheme/Images/loading.gif" alt="" class='loadingImg' />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
<ajax:TabContainer ID="TC_PharmacyOrders" runat="server" ActiveTabIndex="0" AutoPostBack="true">
<ajax:TabPanel ID="TP_Detail" runat="server" TabIndex="1" Visible="false">
<HeaderTemplate>
Detail
</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Pnl_UpdateTrackingNo" runat="server" DefaultButton="Btn_UpdateTrackingNo" Visible="False">
<table class="tblListing">
<tr>
<td colspan="2" class="Heading">Order Detail (Update Tracking / Status) </td>
</tr>
<tr>
<td class="shade">Order No</td>
<td>
<asp:Label ID="Lbl_OrderNoT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Ordered Placed By
</td>
<td>
<asp:Label ID="Lbl_OrderByT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Contact No
</td>
<td>
<asp:Label ID="Lbl_ContacTNoT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Invoice No
</td>
<td>
<asp:Label ID="Lbl_InoviceNoT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Delivery Charges
</td>
<td>
<asp:Label ID="Lbl_DeliveryChargesT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Invoice Amount
</td>
<td>
<asp:Label ID="Lbl_InvoiceAmountT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Delivery Address
</td>
<td>
<asp:Label ID="Lbl_DeliveryAddressT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Pharmacy Remarks
</td>
<td>
<asp:Label ID="Lbl_PharmacyRemarksT" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Status
</td>
<td>
<telerik:RadComboBox ID="Cmb_StatusT" Filter="StartsWith" runat="server" BorderColor="Black" Width="180px" BorderWidth="1px" Skin="Office2010Silver">
<Items>
<telerik:RadComboBoxItem runat="server" Text="Pending" Value="1" />
<telerik:RadComboBoxItem runat="server" Text="Dispatched" Value="2" />
<telerik:RadComboBoxItem runat="server" Text="Cancelled" Value="3" />
<telerik:RadComboBoxItem runat="server" Text="Received by Customer" Value="4" />
<telerik:RadComboBoxItem runat="server" Text="Returned" Value="4" />
</Items>
</telerik:RadComboBox>
</td>
</tr>
<tr>
<td class="shade">Tracking No (if Any)
</td>
<td>
<asp:TextBox ID="TxBx_TrackingNoT" runat="server" ValidationGroup="T"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_TrackingNoT" runat="server" ControlToValidate="TxBx_TrackingNoT" Display="None" ErrorMessage="* Required" ValidationGroup="T"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_TrackingNoT_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_TrackingNoT">
</ajax:ValidatorCalloutExtender>
<ajax:ValidatorCalloutExtender ID="ValidatorCalloutExtender1" runat="server" Enabled="True" TargetControlID="RFV_TrackingNo">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade"> </td>
<td>
<asp:Button ID="Btn_UpdateTrackingNo" runat="server" SkinID="SaveSkin" Text="Save" ValidationGroup="T" Width="100px" OnClick="Btn_UpdateTrackingNo_Click" />
</td>
</tr>
</table>
</asp:Panel>
<asp:Panel ID="Pnl_SaveOrder" runat="server" DefaultButton="Btn_SaveOrder" Visible="False">
<table class="tblListing">
<tr>
<td colspan="2" class="Heading">Order Detail</td>
</tr>
<tr>
<td class="shade">Order No</td>
<td>
<asp:Label ID="Lbl_OrderNo" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Ordered Placed By
</td>
<td>
<asp:Label ID="Lbl_OrderBy" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Contact No
</td>
<td>
<asp:Label ID="Lbl_ContacTNo" runat="server"></asp:Label>
</td>
</tr>
<tr>
<td class="shade">Invoice No
</td>
<td>
<asp:TextBox ID="TxBx_InvoiceNo" runat="server" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_InvoiceNo" runat="server" ControlToValidate="TxBx_InvoiceNo" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_InvoiceNo_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_InvoiceNo">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Prescribed By (Consultant/Dr)
</td>
<td>
<asp:TextBox ID="TxBx_ConsultantName" runat="server" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_ConsultantName" runat="server" ControlToValidate="TxBx_ConsultantName" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="VCE_ConsultantName" runat="server" Enabled="True" TargetControlID="RFV_ConsultantName">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Tracking No (if Any)
</td>
<td>
<asp:TextBox ID="TxBx_TrackingNo" runat="server" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_TrackingNo" runat="server" ControlToValidate="TxBx_TrackingNo" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_TrackingNo_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_TrackingNo">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Delivery Charges
</td>
<td>
<asp:TextBox ID="TxBx_DeliveryCharges" CssClass="numeric" runat="server" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_DeliveryCharges" runat="server" ControlToValidate="TxBx_DeliveryCharges" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_DeliveryCharges_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_DeliveryCharges">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Invoice Amount
</td>
<td>
<asp:TextBox ID="TxBx_InvoiceAmount" runat="server" CssClass="numeric" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_InvoiceAmount" runat="server" ControlToValidate="TxBx_InvoiceAmount" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_InvoiceAmount_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_InvoiceAmount">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Delivery Address
</td>
<td>
<asp:TextBox ID="TxBx_DeliverAddress" TextMode="MultiLine" runat="server" Width="400px" Rows="6" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_DeliverAddress" runat="server" ControlToValidate="TxBx_DeliverAddress" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_DeliverAddress_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_DeliverAddress">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Pharmacy Remarks
</td>
<td>
<asp:TextBox ID="TxBx_PharmacyRemarks" TextMode="MultiLine" runat="server" Width="400px" Rows="6" ValidationGroup="E"></asp:TextBox>
<asp:RequiredFieldValidator ID="RFV_PharmacyRemarks" runat="server" ControlToValidate="TxBx_PharmacyRemarks" Display="None" ErrorMessage="* Required" ValidationGroup="E"></asp:RequiredFieldValidator>
<ajax:ValidatorCalloutExtender ID="RFV_PharmacyRemarks_ValidatorCalloutExtender" runat="server" Enabled="True" TargetControlID="RFV_PharmacyRemarks">
</ajax:ValidatorCalloutExtender>
</td>
</tr>
<tr>
<td class="shade">Status
</td>
<td>
<asp:DropDownList ID="DDL_Status" runat="server" Width="200px">
<asp:ListItem Text="Pending" Value="1"></asp:ListItem>
<asp:ListItem Text="Dispatched" Value="2"></asp:ListItem>
<asp:ListItem Text="Received" Value="4"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</asp:Panel>
<table class="tblListing">
<tr>
<td class="Heading" colspan="2">Upload Invoice
</td>
</tr>
<tr>
<td class="shade"> Upload Invoice</td>
<td>
<asp:FileUpload ID="File_Uploader" runat="server" />
</td>
</tr>
<tr>
<td class="shade"> </td>
<td>
<asp:Button ID="Btn_SaveOrder" runat="server" SkinID="SaveSkin" Text="Save" ValidationGroup="E" Width="100px" OnClick="Btn_SaveOrder_Click" Height="26px" />
</td>
</tr>
</table>
<table class="tblListing">
<tr>
<td style="text-align: center">
<asp:Image ID="Img_Invoice" runat="server" AlternateText="Invoice" />
</td>
</tr>
</table>
<table class="tblListing">
<tr>
<td colspan="2" class="Heading">Prescription
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<asp:Image ID="Img_Prescription" runat="server" AlternateText="Prescription" />
</td>
</tr>
<tr id="TR_Move" runat="server">
<td runat="server">
<asp:Button Width="100px" ID="Btn_Previouse" runat="server" Text="<< Previouse " CausesValidation="False" SkinID="ShowAllSkin" OnClick="Btn_Previouse_Click" />
</td>
<td runat="server">
<asp:Button ID="Btn_Next" Width="100px" runat="server" Text="Next >>" CausesValidation="False" SkinID="ShowAllSkin" OnClick="Btn_Next_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</ajax:TabPanel>
</ajax:TabContainer>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="Btn_SaveOrder" />
</Triggers>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="CPH_Footer" runat="Server">
</asp:Content>***
Hi I have two usercontrols.
The first user control has a button and the second user control has a popup control.
I registered the second user control in the first user control with id=ctlPopUp
Onclick event of button I have to display the popup control.
I tried with
protected void btnUser_Click(object sender, EventArgs e)
{
var userCtlPopup = ctlPopUp.FindControl("pcDownload");
userCtlPopup.Visible = true;
}
It doesn't work. Can you please suggest?
Hi here is the user control markups:
POpupUsercontrol:
<div id="divDownload" runat="server" visible="true">
<dx:aspxpopupcontrol id="pcDownload" runat="server" showpagescrollbarwhenmodal="true"
clientinstancename="pcDownload" enableclientsideapi="true" modal="True" popuphorizontalalign="WindowCenter"
popupverticalalign="WindowCenter" showheader="false" allowdragging="True" enableanimation="False"
enableviewstate="False" width="600px" autoupdateposition="true" closeaction="CloseButton">
<ContentCollection>
<dx:PopupControlContentControl ID="PopupControlContentControl4" runat="server"
Width="100%">
<dx:ASPxPanel ID="ASPxPanel3" runat="server">
<PanelCollection>
<dx:PanelContent ID="PanelContent4" runat="server">
<div>
<table class="cChildTable">
<tr>
<td>
<h3>Download</h3>
</td>
</tr>
<tr>
<td class="auto-style1">
<div class="hr">
</div>
<asp:Label ID="lblDownLoadMessages" runat="server" CssClass="cMessageArea"></asp:Label>
</td>
</tr>
</table>
<table class="cChildTable" border="0">
<tr><td style="font:bold" colspan="2"><asp:Label ID="Title" runat="server" Text="Content Link Title"></asp:Label></td></tr>
<tr>
<td style="vertical-align: top; width: 30px; padding: 2px" rowspan="8">
<asp:CheckBox ID="chkImg" runat="server" AutoPostBack="True" Checked="true" />
</td>
<td style="vertical-align: top" rowspan="3">
<asp:Image runat="server" ID="imgUpload" Width="100px" Height="100px" Style="top: 0px;" AlternateText="No Image" />
</td>
<td>
<asp:CheckBox ID="chkName" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblName" runat="server" Text="Name:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtName" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkCompany" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblCompany" runat="server" Text="Company:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCompany" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkAddress" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblAddress" runat="server" Text="Address:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td rowspan="5" style="vertical-align:top"><asp:LinkButton ID="lnkAddImg" runat="server"> </asp:LinkButton></td>
<td>
<asp:CheckBox ID="chkCtyStateZip" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblCtyStateZip" runat="server" Text="City, State Zip:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtCtyStateZip" runat="server" CssClass="cText" Width="300px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkPhone" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblPhone" runat="server" Text="Phone:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtPhone" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkFax" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblFax" runat="server" Text="Fax:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtFax" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkEmail" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblEmail" runat="server" Text="Email:" Width="90px"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:CheckBox ID="chkOther" runat="server"
AutoPostBack="true" />
</td>
<td class="cLabel" style="width: 15%">
<asp:Label ID="lblOther" runat="server" Text="Other:" Width="90px "></asp:Label>
</td>
<td>
<asp:TextBox ID="txtOther" runat="server" CssClass="cText" Width="150px" MaxLength="75"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="4">
<div class="buttons">
<span id="span2" class="cBtnLeft"><span class="cBtnMid"><span class="cBtnRight">
<asp:Button ID="btnDownLoad" runat="server" Width="65px" CssClass="cBtnRight" Text="Download"
OnClick="btnDownLoad_Click"/>
</span></span></span><span id="span1" class="cBtnLeft"><span class="cBtnMid"><span
class="cBtnRight">
<asp:Button ID="btnCancel" runat="server" Width="65px" CssClass="cBtnRight" Text="Cancel"
Visible="true" OnClick="btnCancel_Click" />
</span></span></span>
</div>
</td>
</tr>
</table>
</div>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxPanel>
</dx:PopupControlContentControl>
</ContentCollection>
</dx:aspxpopupcontrol>
</div>
Usercontrol where the popup user control is called
<asp:Panel runat="server" ID="pnlCategoryDetail" Width="100%">
<dx:ASPxDataView ID="dvMARCCategoryDetail" runat="server" Width="100%"
ClientInstanceName="dvMARCCategoryDetail" style="clear: both" ColumnCount="2" RowsPerPage="2" OnPageIndexChanged="dvMARCCategoryDetail_PageIndexChanged">
<itemtemplate>
<table>
<tbody>
<tr>
<td>
<table>
<tr>
<td>
<asp:Image ID="ModelImage" runat="server" ImageUrl='<%#Eval("ImageUrl") %>'>
</asp:Image>
</td>
<td>
<div style="width: 5px" class="Spacer">
</div>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<asp:Label ID="ModelLabel" runat="server" Text='<%# Eval("DocumentName") %>' Font-Bold="True"
>
</asp:Label></td>
</tr>
<tr>
<td style="text-align:left;padding-bottom:1em;">
<asp:Label ID ="txtText1" runat="server" Text="The May edition of News Brief contains seven newsworthy articles"></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:Label ID ="txtText2" runat="server" Text="Suggested Subject Line: The May 2014 News Brief has arrived!"></asp:Label>
</td>
</tr>
<tr>
<td style="white-space:nowrap;">
<a id="clink2" style="width:60px">Content Link 1</a>
<asp:ImageButton ID="ImageButton2" runat="server" OnClick="btnArrow_Click" ImageUrl="~/Images/DownloadArrow.png" ToolTip="Download Item" style="padding-top:8px"/>
<asp:ImageButton ID="ImageButton1" runat="server" OnClick="btnAdd_Click" ImageUrl="~/Images/Add.png" ToolTip="Add Item" style="padding-top:8px"/>
</td>
<td> </td></tr>
</table>
</td>
</tr>
</tbody>
</table>
</itemtemplate>
<paddings padding="0px" />
<itemstyle height="50px">
</itemstyle>
</dx:ASPxDataView>
</asp:Panel>
<div id="divCategoryPopup" runat="server">
<downloadPopUp:categoryPopup id="ctlPopUp" runat="server"></downloadPopUp:categoryPopup>
</div>
On click of btnArrow_Click the popup user control should be displayed
I am trying to clear the form on cancel button click with a function clearForm() that uses String.Empty with each field of the form but this is not working. I am neither getting any error nor getting the expected result.
Here's my design code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="AddEmployee.aspx.cs" Inherits="AddEmployee" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Add Employee</title>
<link href="css/Style.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<ajax:ToolkitScriptManager ID="toolkit1" runat="server"></ajax:ToolkitScriptManager>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<table align="center" class="loginBox">
<tr>
<th colspan="2" style="color:White; font-size:medium; padding-bottom:10px;" align="left">Personal Information</th>
</tr>
<tr>
<td>Name:</td>
<td><asp:TextBox ID="txtName" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName" ControlToValidate="txtName" runat="server" Display="None" ErrorMessage="Name" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox TextMode="MultiLine" Height="40" Width="135" ID="txtAddress" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqAdd" ControlToValidate="txtAddress" runat="server" Display="None" ErrorMessage="Address" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>DoB:</td>
<td>
<asp:TextBox ID="txtDoB" CssClass="signup_textbox cal_box" runat="server" />
<ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDoB" Format="dd/MM/yyyy" runat="server"></ajax:CalendarExtender>
</td>
</tr>
<tr>
<td>Gender</td>
<td>
<asp:RadioButtonList CssClass="signup_textbox" ID="GenderList" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True">Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
</td>
</tr>
<tr>
<th colspan="2" style="color:White; font-size:medium; padding-bottom:10px;" align="left">Professional Information</th>
</tr>
<tr>
<td>Department:</td>
<td>
<asp:DropDownList ID="ddlDept" CssClass="signup_textbox" runat="server"></asp:DropDownList>
</td>
</tr>
<tr>
<td>Designation:</td>
<td><asp:TextBox ID="txtDesig" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqDesig" ControlToValidate="txtDesig" runat="server" Display="None" ErrorMessage="Designation" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Salary:</td>
<td><asp:TextBox ID="txtSal" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqSal" ControlToValidate="txtSal" runat="server" Display="None" ErrorMessage="Salary" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator runat="server" id="rexSal" controltovalidate="txtSal" validationexpression="^[0-9]{5}$" errormessage="Salary must be max 5 digits" Display="None" />
</td>
</tr>
<tr>
<th colspan="2" style="color:White; font-size:medium; padding-bottom:10px;" align="left">Login Information</th>
</tr>
<tr>
<td>Email:</td>
<td>
<asp:TextBox ID="txtEmail" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqEmail" ControlToValidate="txtEmail" runat="server" Display="None" ErrorMessage="Email" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="valEmail" runat="server" ErrorMessage="Invalid Email" ControlToValidate="txtEmail" ValidationExpression="^([\w\.\-]+)#([\w\-]+)((\.(\w){2,3})+)$" CssClass="error_msg" Display="none" />
</td>
</tr>
<tr>
<td>Username:</td>
<td>
<asp:TextBox ID="txtUser" CssClass="signup_textbox" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqUser" ControlToValidate="txtUser" runat="server" Display="None" EnableClientScript="true" SetFocusOnError="true" ErrorMessage="Username" ></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" Display="None" ControlToValidate="txtUser" ValidationExpression="^[\s\S]{3,}$" runat="server" ErrorMessage="Username must have at least 3 characters required."></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td>Password:</td>
<td><asp:TextBox ID="txtPass" CssClass="signup_textbox" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqPass" ControlToValidate="txtPass" runat="server" Display="None" EnableClientScript="true" SetFocusOnError="true" ErrorMessage="Password" ></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Confirm Password:</td>
<td><asp:TextBox ID="txtConfPass" CssClass="signup_textbox" runat="server" TextMode="Password"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqConfPass" ControlToValidate="txtConfPass" runat="server" Display="None" EnableClientScript="true" SetFocusOnError="true" ErrorMessage="Confirm Password" ></asp:RequiredFieldValidator>
<asp:CompareValidator ID="cmpPass" runat="server" ControlToCompare="txtPass" ControlToValidate="txtConfPass" ErrorMessage="Password must match" CssClass="error_msg" Display="None"></asp:CompareValidator>
</td>
</tr>
<tr>
<td align="center" colspan="2" style="padding:5px;"><span><asp:Button ID="btnRegister" Width="60" runat="server" Text="Register" CssClass="btnLogin" OnClick="btn_AddEmp" /></span>
<span><asp:Button ID="btnClr" Width="60" runat="server" Text="Cancel" CssClass="btnLogin" OnClick="btn_ClearForm" /></span>
</td>
</tr>
</table>
<asp:Panel ID="errorsPanel" runat="server" Style="display: none; border-style: solid; border-width: thin; border-color: #FFDBCA" Width="175px" BackColor="White">
<asp:ValidationSummary ID="valSummary" runat="server" CssClass="error_msg" HeaderText="You must enter following" DisplayMode="BulletList" EnableClientScript="true" ShowSummary="true" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Here's my code-behind:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Globalization;
public partial class AddEmployee : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btn_ClearForm(object sender, EventArgs e) //to clear form on IsPostBack or on press of cancel button
{
if (!IsPostBack)
{
clearForm();
}
}
#region public functions
public void clearForm()
{
txtName.Text = String.Empty;
txtAddress.Text = String.Empty;
txtDoB.Text = String.Empty;
txtDesig.Text = String.Empty;
txtSal.Text = String.Empty;
txtEmail.Text = String.Empty;
txtUser.Text = String.Empty;
txtPass.Text = String.Empty;
txtConfPass.Text = String.Empty;
GenderList.Items[0].Selected = true;
GenderList.Items[1].Selected = false;
}
#endregion
}
There is nothing wrong with string.Empty. But you do not need condition in btn_ClearForm as btn_ClearForm handler will always called on postback and you put the condition if !IsPostBack
// if (!IsPostBack)
//{
clearForm();
// }
Your code would be
protected void btn_ClearForm(object sender, EventArgs e)
{
clearForm();
}
Got the fix!
Just use CausesValidation="false" on the cancel button so as to disable validation upon cancel button click event.
Because when you have used validation on your controls without using CausesValidation="false" on the cancel button, your controls will be forced to pass through validation conditions given to them and since the cancel button is meant to clear your form regardless of checking the validity of the data in form fields, the form will get stuck.
So whenever you have used validation conditions on your controls, just make sure you don't get them fired on the click of Cancel/clear/reset button.
Thanks
I have a two-step form that I set up with validation on the fields.
The validation for the first two fields (first name / last name) works as desired.
However the last two fields (user/password) get validated two soon.
I would like the user / password fields to get validate only on "submit button" click...
Here's a working example and my code.
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>
try adding EnableClientScript="False" to your validators
<asp:requiredfieldvalidator id="fvFname" runat="server"
EnableClientScript="False"
validationgroup="personalGroup" Display="None"
ControlToValidate="txtFname"
ErrorMessage='"First Name" is required'>
</asp:requiredfieldvalidator>
It turns out that Panel controls is the answer to my issue. I found a solution on this website. (compliments of Doug Seven). Built it and tested and works like a charm.
http://devproconnections.com/database-development/create-multistep-forms
Currently I'm doing a web form and added some textbox for users to insert into the database. It is working alright already, the validation seems to work successfully without any exception or errors. But I need to align the textbox to make it properly displayed on the browser (Mozilla FireFox).
The problem is, my validation IS IN THE TABLE seems not to be working and I keep encountering error that stated my textbox is null, when I clearly filled that textbox with the correct datatype.
Here is my code:
<table>
<tr>
<td> Customer name </td>
<td><asp:TextBox ID="txtCustomerName0" runat="server" display="Dynamic" ValidationGroup="VG"></asp:TextBox></td>
<td class="style1">
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
ErrorMessage="This field must be filled in"
ControlToValidate="txtCustomerName0"
ValidationGroup="VG" Display="Dynamic"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td> Contact </td>
<td><asp:TextBox ID="txtContact0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator9" runat="server"
ControlToValidate="txtContact0" ErrorMessage="Please put correct phone no."
Operator="DataTypeCheck" Type="Integer"
ValidationGroup="VG" Display="Dynamic"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>ProductCode</td>
<td><asp:TextBox ID="txtProductCode0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td>ProductName</td>
<td><asp:TextBox ID="txtProductName0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td>Description</td>
<td><asp:TextBox ID="txtDescription0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td>Address</td>
<td><asp:TextBox ID="txtAddress0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td> </td>
</tr>
<tr>
<td>Quantity</td>
<td><asp:TextBox ID="txtQuantity0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator10" runat="server"
ControlToValidate="txtQuantity0" ErrorMessage="Please put correct quantity"
Operator="DataTypeCheck" Type="Integer"
ValidationGroup="VG"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>UnitSalePrice</td>
<td><asp:TextBox ID="txtUnitSalePrice0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator11" runat="server"
ControlToValidate="txtUnitSalePrice0" ErrorMessage="Please put correct price"
Operator="DataTypeCheck" Type="Currency"
ValidationGroup="VG"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>Amount</td>
<td><asp:TextBox ID="txtAmount0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator12" runat="server"
ControlToValidate="txtAmount0" ErrorMessage="Please put correct amount"
Operator="DataTypeCheck" Type="Currency"
ValidationGroup="VG"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>RequiredDate</td>
<td><asp:TextBox ID="txtRequiredDate0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator13" runat="server"
ControlToValidate="txtRequiredDate0"
ErrorMessage="Please put correct date format" Operator="DataTypeCheck"
Type="Date" ValidationGroup="VG"></asp:CompareValidator>
</td>
</tr>
<tr>
<td>ConfirmedDate</td>
<td><asp:TextBox ID="txtConfirmedDate0" runat="server" ValidationGroup="VG"></asp:TextBox></td>
<td>
<asp:CompareValidator ID="CompareValidator14" runat="server"
ControlToValidate="txtConfirmedDate0"
ErrorMessage="Please put correct date format"
Operator="DataTypeCheck" Type="Date"
ValidationGroup="VG"></asp:CompareValidator></td>
</tr>
<tr>
<td><asp:Button ID="btnAdd" runat="server" onclick="btnAdd_Click" Text="ADD" ValidationGroup="VG" /></td>
<td><asp:Button ID="btnBack0" runat="server" onclick="btnHome_Click" Text="Back" /></td>
<td></td>
</tr>
</table>
Use the "Width" property for the Alignment
Make css file for that. In the file add one class, for example:
.textbox
{
text-align:center;
}
apply that cssclass="textbox" with you textbox and
you will get textbox align.