[CLOSED] Get Form Invalid Fields List

  1. #1

    [CLOSED] Get Form Invalid Fields List

    Dears,

    I'm using the following code to validate my form:

    <ext:Button ID="btnSaveMembershipInfo" runat="server" Icon="DiskBlack" Text="Save"  >
    	<Listeners>
    		<Click Handler="if(#{FormPanel1}.validate()) { doStaff(); } else { Ext.Msg.alert('Error','Please, correct red lined fields first'); return false; } " />
    	</Listeners>
    </ext:Button>
    The problem I'm facing with my users is that the form is complicated form with many Tabs.
    So, the user should go through each Tab to look for the red bordered text fields.

    How I can guide the user to invalid field by mentioning its (FieldLabel)?
    How to list the invalid fields of any form?

    Regards,
    Ali
    Last edited by fabricio.murta; Jan 21, 2017 at 3:10 PM. Reason: no user feedback for 7+ days
  2. #2
    Hello Ali!

    I believe this thread has a sample that will be of great interest for you as a solution: Status Bar with Troubles.

    Basically, there's a status bar which -- when clicked -- show the user which fields have failed validation. It uses ValidationStatus plugin inside the ext:StatusBar component.

    There's also an Ext.NET example showcasing its usage: Toolbar - Status Bar - Advanced.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Dear @fabricio.murta,

    Thank you for your response.

    I have added the following status to my code:

    <ext:StatusBar ClientIDMode="Static" ID="FormStatusBar" runat="server" DefaultText="Ready">
    	<Plugins>
    		<ext:ValidationStatus
    			runat="server"
    			FormPanelID="FormPanel1"
    			ShowText="Show Error List"
    			HideText="Hide Error List"
    			ValidIcon="Accept"
    			ErrorIcon="Exclamation"
    			/>
    	</Plugins>
    </ext:StatusBar>
    Now, I'm facing two issues:

    1. The status plugin is showing ONLY the default error text (This field is required) without the field label (I doin't want to overwrite the default error text).

    Click image for larger version. 

Name:	ERROR_LIST.jpg 
Views:	106 
Size:	91.5 KB 
ID:	24790

    2. The fields are placed in different Tabs and when you click on error list the cursor is moved to that field, but it will NOT set the Tab as active so the user can not notice that the cursor is in that field.

    How I can solve these issues?

    Regards,
    Ali
    Last edited by Alaswad; Dec 07, 2016 at 9:25 AM.
  4. #4
    Hello Ali!

    I am afraid you have to give the field's a descriptive error message in order to allow the plugin to give the lead you want for the user to know where to find the failed field. The status can't probe by itself the hierarchy you gave to the form, like, if it is inside a tab that's enclosed on a field group and so on...

    It would help giving suggestions if you drew us a test case we can run and give it meaningful behavior and pinpoint useful changes.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Dear @fabricio.murta,

    Consider the following case:

    <ext:FormPanel 
    	ID="FormPanel1" 
    	runat="server" 
    	MarginSpec="0 0 0 0"  
    	PaddingSpec="0 0 0 0"
    	Header="false"
    	Frame="false"
    	ButtonAlign="Right"
    	Layout="FitLayout">
    	<Plugins>
    		<ext:DataTip runat="server" />
    	</Plugins>
    	<Items>
    		<ext:TabPanel 
    			runat="server" 
    			PaddingSpec="0 0 0 0"
    			Layout="FitLayout"
    			MarginSpec="0 0 0 0"
    			Plain="true">
    			<Defaults>
    				<ext:Parameter Name="bodyPadding" Value="0" Mode="Raw" />
    				<ext:Parameter Name="autoScroll" Value="true" Mode="Raw" />
    			</Defaults>
    			<Items>
    				<ext:Panel 
    					runat="server" 
    					Title="Tab A"
    					Icon="UserKey"
    					Layout="FitLayout"
    					PaddingSpec="0 0 0 0"
    					BodyCls="my-carousel"
    					AutoScroll="true"
    					MarginSpec="0 0 0 0">
    						<Items>
    							<ext:TextField Flex="1" AllowBlank="false" ClientIDMode="Static" ID="txt1" runat="server"  FieldLabel="Text" LabelAlign="Left" />
    						</Items>
    				</ext:Panel>
    				<ext:Panel 
    					runat="server" 
    					Title="Tab B"
    					Icon="UserKey"
    					Layout="FitLayout"
    					PaddingSpec="0 0 0 0"
    					BodyCls="my-carousel"
    					AutoScroll="true"
    					MarginSpec="0 0 0 0">
    						<Items>
    							<ext:TextField Flex="1" AllowBlank="false" ClientIDMode="Static" ID="txt2" runat="server"  FieldLabel="Text" LabelAlign="Left" />
    						</Items>
    				</ext:Panel>
    				<ext:Panel 
    					runat="server" 
    					Title="Tab C"
    					Icon="UserKey"
    					Layout="FitLayout"
    					PaddingSpec="0 0 0 0"
    					BodyCls="my-carousel"
    					AutoScroll="true"
    					MarginSpec="0 0 0 0">
    						<Items>
    							<ext:TextField Flex="1" AllowBlank="false" ClientIDMode="Static" ID="txt3" runat="server"  FieldLabel="Text" LabelAlign="Left" />
    						</Items>
    				</ext:Panel>				
    			</Items>
    		</ext:TabPanel>
    	</Items>
    </ext:FormPanel>
    Now, suppose Tab A is active, and txt3 is empty, when you click on the error message, the cursor will be moved to field txt3, but you will not be able to recognise that, because Tab A is active and Tab C is not active. We need to move the cursor to txt3 and make Tab C active also.

    How to achieve that?

    Regards,
    Ali
  6. #6
    Hello Ali!

    First thought on the sample you shown... What if you have 3 tabs (A, B, C), are on the tab C, and got errors in both A and B tabs? Which one should it highlight?.. Maybe just showing directions from the status bar to which tab that field belongs would be better?

    Or validate the forms before moving on to the next tab (bind the validation to the tab switch event)? Else, we can't guarantee we will be able to move back to the tab with errors. Unless you can ensure only tab A will have errors and just switch to the tab should validation errors occur.

    You can set up a custom action to be taken when validity changes, then get which control failed validation and make the tab containing it be shown. Just that if you got two fields failing in different tabs you'd get an inconsistency.

    EDIT: I've tried running your sample code but I only see three tabs and text fields with 'allowblank=false'. And no actual means to trigger the validation so I could possibly reproduce your scenario. More elements are likely to be necessary on your test case so I could get in more detail.

    Maybe something similar to this example, but involving tab panels?
    - Form - Validation - Remote
    Last edited by fabricio.murta; Dec 21, 2016 at 3:56 PM.
  7. #7
    Hello again Ali!

    It's been some time since we left you a follow up to this thread and still no response from you. Do you still need assistance with this? We're looking forward to be able to help if you provide us the required information so we could understand your problem and lead you towards the best solution possible!

    If you don't reply to this thread in 7 business days or more, we may be marking it as closed, but you will still be able to post follow ups here when you are able, so take your time.

    We hope to hear back from you soon!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] FormPanel loaded with invalid fields
    By aguidali in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Sep 19, 2014, 9:34 AM
  2. [CLOSED] Form is showing invalid at start
    By wisdomchuck in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 04, 2013, 3:49 PM
  3. Replies: 4
    Last Post: Apr 30, 2012, 4:49 PM
  4. [CLOSED] cross-window form validation with focus on an invalid control
    By ViniVidi in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 18, 2011, 4:51 PM
  5. [CLOSED] Trying to flag a form as invalid
    By ewgoforth in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 09, 2011, 6:55 PM

Posting Permissions