Nov 13, 2013, 2:05 PM
How to Validate one form with TabPanels using the formLayout Monitorvalidation option
Hi I have to implement the validation functionality like if all the form controls with in the Tabpanels is valid then it should enable the "Save" button otherwise it should be disabled.
In this marked as * are required fields
Here it is working fine for first tabPanel, but when we fill the first tabPanel control values without filling the other tabPanels the save button enables i.e which is not validating correctly.
Suggest me the right way to validate all the controls with in the all the tabpanels also.
Thank you.
In this marked as * are required fields
<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<html>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="reso" SourceFormatting="true" runat="server" />
<ext:Panel ID="MainPanel" runat="server" AutoHeight="true" Layout="VBoxLayout" Border="false"
AutoScroll="true">
<LayoutConfig>
<ext:VBoxLayoutConfig Align="Left" />
</LayoutConfig>
<Items>
<ext:Panel ID="pnlEditInfo" Header="false" Border="false" runat="server" Title="Basic Info"
Width="950" AutoHeight="true" AutoScroll="true" Layout="Form" ButtonAlign="Center"
Padding="5" MinHeight="550">
<Items>
<ext:FormPanel ID="fpnlCreateStatus" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:Container runat="server" ID="ContnOne" Layout="ColumnLayout" Width="700" MinHeight="120">
<Items>
<ext:Container runat="server" Layout="Form" ColumnWidth=".5" ID="ContOneChild">
<Items>
<ext:TextField ID="txtCompanyName" runat="server" FieldLabel="* Company Name" Cls="labelStyle"
AnchorHorizontal="95%" AllowBlank="false" BlankText="Company Name is required"
MaskRe="/[a-zA-Z0-9-. ]/" MaxLength="240" PaddingSpec="8 0 0 0" Width="350" LabelAlign="Right"
LabelWidth="135">
</ext:TextField>
<ext:TextField ID="txtShortName" MaskRe="/[A-Za-z/_/-/ ]/" Cls="labelStyle" MaxLength="25" LabelWidth="135" AllowBlank="false" BlankText="Short Name is required"
LabelAlign="Right" Width="350" runat="server" FieldLabel="* Short Name" AnchorHorizontal="95%" />
<ext:RadioGroup ID="rghasMultipleLoc" LabelWidth="135" LabelAlign="Right" runat="server"
FieldLabel="Has Multiple Locations?" Width="250">
<Items>
<ext:Radio ID="rdMultiLocYes" runat="server" BoxLabel="Yes" Checked="true" />
<ext:Radio ID="rdMultiLocNo" runat="server" BoxLabel="No" />
</Items>
</ext:RadioGroup>
</Items>
</ext:Container>
</Items>
</ext:Container>
<ext:TabPanel ID="tbpnlCompany" runat="server" Plain="true" Width="830"
Border="false">
<Items>
<ext:Panel ID="pnlProfile" runat="server" Title="Profile" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:FormPanel ID="frmCompProfile" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextArea ID="txtCompanyProfile" LabelAlign="Right" runat="server" FieldLabel="* Company Profile"
LabelWidth="150" Height="100" TabIndex="1" LabelStyle="font-weight: bold;" AllowBlank="false"
Width="500" BlankText="Company Profile is required" MaskRe="[a-zA-Z0-9!@#$%^&*().-_ ]"
MaxLength="500" />
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlAddress" runat="server" Title="Address" Padding="10" Layout="Form"
Border="false" Height="130">
<Items>
<ext:FormPanel ID="frmPanelAddress" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtAddress1" LabelAlign="Right" runat="server" FieldLabel="* Address1"
TabIndex="2" LabelStyle="font-weight: bold;" AllowBlank="false" Width="500" BlankText="Address1 is required"
MaskRe="[a-zA-Z0-9!@#$%^&*().-_ ]" MaxLength="250" />
<ext:Panel ID="Panel1" runat="server" Layout="ColumnLayout" Border="false">
<Items>
<ext:Panel ID="Panel2" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtCity" MaskRe="[A-Za-z ]" MaxLength="50" LabelAlign="Right"
runat="server" PaddingSpec="0 0 5 0" TabIndex="4" FieldLabel="City" Width="250"
RemoveClearTrigger="true" Cls="labelStyle" AllowBlank="false" BlankText="City Name is required">
</ext:TextField>
<ext:ComboBox ID="cbCountry" LabelAlign="Right" FieldLabel="* Country" LabelStyle="font-weight: bold;"
TabIndex="5" runat="server" Editable="false" DisplayField="CountryName" BlankText="Country is required"
AllowBlank="false" MsgTarget="Side" ValueField="CountryCode" EmptyText="Select"
Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="India" Value="1">
</ext:ListItem>
<ext:ListItem Text="U.A.E" Value="3">
</ext:ListItem>
</Items>
</ext:ComboBox>
</Items>
</ext:Panel>
<ext:Panel ID="Panel3" runat="server" Layout="ColumnLayout" ColumnWidth=".3" Border="false">
<Items>
<ext:TextField ID="txtZIP" MaskRe="/[0-9]/" MinLength="6" LabelAlign="Right" runat="server"
TabIndex="6" FieldLabel="ZIP Code" Width="250" PaddingSpec="0 0 5 0" />
<ext:ComboBox ID="cbState" LabelAlign="Right" MsgTarget="Side" FieldLabel="* State"
TabIndex="7" AllowBlank="false" LabelStyle="font-weight: bold;" runat="server"
Editable="false" DisplayField="StateName" ValueField="StateCode" BlankText="State is required"
EmptyText="Select" Resizable="false" SelectOnFocus="true" Width="250">
<Items>
<ext:ListItem Text="Andhra Pradesh" Value="1">
</ext:ListItem>
<ext:ListItem Text="Kerala" Value="2">
</ext:ListItem>
<ext:ListItem Text="London" Value="5">
</ext:ListItem>
<ext:ListItem Text="Kentucky" Value="6">
</ext:ListItem>
</Items>
<SelectedItems>
<ext:ListItem Value="1">
</ext:ListItem>
</SelectedItems>
</ext:ComboBox>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
<ext:Panel ID="pnlCommunication" runat="server" Title="Communication" Border="false" TagString="Communication"
Height="130" Padding="10" Layout="Form">
<Items>
<ext:FormPanel ID="frmPnlCommunication" Cls="formBackground" runat="server" BodyCls="formheader"
Padding="5" ButtonAlign="Center" Layout="FormLayout" Frame="false" MonitorValid="true"
Width="850" Border="false">
<Items>
<ext:TextField ID="txtWebsite" LabelAlign="Right" Regex="/^[A-Za-z0-9-\.]+\.[A-Za-z]{2,4}\/?([^\s<>\#%\,\{\}\\|\\\^\[\]`]+)?$/"
MaxLength="25" InvalidText="Website is invalid" MsgTargetElement="lblErrorMsg" MsgTarget="Side"
runat="server" TabIndex="8" FieldLabel="Website" Width="500" RegexText="Enter Valid Website">
</ext:TextField>
<ext:TextField ID="txtEmailid" LabelAlign="Right" Regex="^(\w+)([-+.][\w]+)*@(\w[-\w]*\.){1,5}([A-Za-z]){2,4}$"
MaxLength="50" TabIndex="9" RegexText="Enter correct emailid" runat="server"
FieldLabel="EmailID" Width="500" />
<ext:TextField ID="txtPhone" LabelAlign="Right" BlankText="Phone is required" runat="server"
TabIndex="10" FieldLabel="Phone" Width="500" MaskRe="/[0-9\-]/" MaxLength="25"
MaxLengthText="Maximum length for phone is 15" />
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:TabPanel>
<ext:Panel runat="server" ID="pnlButtons" Height="30" Border="false" Width="600"
ButtonAlign="Center">
<Items>
<ext:Button ID="btnSave" runat="server" Cls="buttonstyle" Icon="Disk" Disabled="true"
Text="Save" TabIndex="24" X="250">
<Listeners>
</Listeners>
</ext:Button>
<ext:Button ID="btnCancel" runat="server" Cls="buttonstyle" Text="Cancel" Icon="Cancel"
X="260" TabIndex="25">
</ext:Button>
</Items>
</ext:Panel>
</Items>
<Listeners>
<ValidityChange Handler="#{btnSave}.setDisabled(!valid);" />
</Listeners>
</ext:FormPanel>
</Items>
</ext:Panel>
</Items>
</ext:Panel>
</div>
</form>
</body>
</html>Here it is working fine for first tabPanel, but when we fill the first tabPanel control values without filling the other tabPanels the save button enables i.e which is not validating correctly.
Suggest me the right way to validate all the controls with in the all the tabpanels also.
Thank you.
Originally Posted by Baidaly
