What's New?

[CLOSED] Validation status after saving and clearing the form fields

  1. #1
    Nov 24, 2013, 6:21 AM

    [CLOSED] Validation status after saving and clearing the form fields

    Hi all,
    In a form we have many fields which are mandatory(by using allowBlank=false).
    After saving those details we are clearing all the data from the fields.
    At this time the validation message is showing and also allowblank is also firing.
    See the below link for validationstatus
    https://examples2.ext.net/#/Toolbar/StatusBar/Advanced/

    See the following code to reproduce the issue.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm18.aspx.cs" Inherits="Ext2._2Practice.WebForm18" %>


<%@ Register Namespace="Ext.Net" Assembly="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script runat="server">
        protected void FormSave(object sender, DirectEventArgs e)
        {
            FormStatusBar.SetStatus(new StatusBarStatusConfig { Text = "Form saved!", IconCls = " ", Clear2 = true });
            TextField1.Text = string.Empty;
            DateField1.SetValue(null);            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Panel ID="Panel1"
            runat="server"
            Title="StatusBar with Integrated Form Validation"
            Width="350"
            Height="160"
            Layout="Fit">
            <Items>
                <ext:FormPanel
                    ID="StatusForm"
                    runat="server"
                    LabelWidth="75"
                    ButtonAlign="Right"
                    Border="false"
                    Padding="10">
                    <Defaults>
                        <ext:Parameter Name="Anchor" Value="95%" />
                        <ext:Parameter Name="AllowBlank" Value="false" Mode="Raw" />
                        <ext:Parameter Name="SelectOnFocus" Value="true" Mode="Raw" />
                        <ext:Parameter Name="MsgTarget" Value="side" />
                    </Defaults>
                    <Items>
                        <ext:TextField ID="TextField1" runat="server" FieldLabel="Name" BlankText="Name is required" />
                        <ext:DateField ID="DateField1" runat="server" FieldLabel="Birthdate" BlankText="Birthdate is required" />
                    </Items>
                    <Buttons>
                        <ext:Button ID="Button1" runat="server" Text="Save" Icon="Disk">
                            <DirectEvents>
                                <Click
                                    OnEvent="FormSave"
                                    Before="var valid= #{StatusForm}.getForm().isValid(); if (valid) {#{FormStatusBar}.showBusy('Saving form...');} return valid;">
                                    <EventMask
                                        ShowMask="true"
                                        MinDelay="1000"
                                        Target="CustomTarget"
                                        CustomTarget="={#{StatusForm}.getEl()}" />
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Buttons>
                </ext:FormPanel>
            </Items>
            <BottomBar>
                <ext:StatusBar ID="FormStatusBar" runat="server" DefaultText="Ready">
                    <Plugins>
                        <ext:ValidationStatus ID="ValidationStatus1"
                            runat="server"
                            FormPanelID="StatusForm"
                            ValidIcon="Accept"
                            ErrorIcon="Exclamation" />
                    </Plugins>
                </ext:StatusBar>
            </BottomBar>
        </ext:Panel>
    </form>
</body>
</html>
    Please look at the attached image
    Please contact if you need more explanation
    Attached Thumbnails Click image for larger version.  Name: Vaidationstatus.png  Views: 12  Size: 32.8 KB  ID: 7263  
    Last edited by Daniil; Dec 03, 2013 at 12:47 PM. Reason: [CLOSED]
  2. #2
    Nov 25, 2013, 11:28 AM
    Hi Mohan,

    Please try:
    protected void FormSave(object sender, DirectEventArgs e)
{
    StatusForm.Reset();
    FormStatusBar.ClearStatus();
    FormStatusBar.SetStatus(new StatusBarStatusConfig { Text = "Form saved!" });
}
  3. #3
    Nov 26, 2013, 1:07 PM

    Validation status of Sub formpanel

    Thank you Daniil,
    The given solution is worked.

    I have another question regarding the validation status,
    My requirement is as follows
    In my project we have a page which has two sub form panels inside a formpanel. We kept statusbar for main formpanel.
    Based on radio button selection we are showing/hiding sub formpanels,
    so on page save button click I want enabled form panel validation messages only.
    Is it possible to set formpanelId for validationstatus control dynamically from javascript ?
    how can we achive this functionality?

    Here is the detailed code to reproduce the issue

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidationStatus.aspx.cs" Inherits="Ext2._2Practice.ValidationStatus" %>


<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>


<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Sample</title>
    <script type="text/javascript">
        var ValidateStatus = function () {
            debugger;
            if (App.rdFirst.checked) {
                App.formPanelSub1.show();
                App.formPanelSub2.hide();
            }
            else {
                App.formPanelSub1.hide();
                App.formPanelSub2.show();
            }
            App.formPanelSub1.reset();
            App.formPanelSub2.reset();
            App.statusMain.clearStatus();
            App.statusMain.setStatus({ text: '', clear: true });
        }
    </script>
    <script runat="server">
        protected void btnSave_OnEvent(object sender, DirectEventArgs e)
        {
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Viewport ID="viewPortDefault" runat="server" Layout="Border">
            <Items>
                <ext:FormPanel ID="formPanelMain" BodyPadding="20" AutoScroll="true" runat="server" ButtonAlign="Center" Layout="FormLayout" Region="Center">
                    <Items>
                        <ext:FieldContainer ID="fcScheduleType" runat="server" LabelWidth="120" LabelAlign="Right" FieldLabel="Schedule Type">
                            <Items>
                                <ext:RadioGroup ID="rdgScheduleType" runat="server" Width="280" AllowBlank="false" ColumnsNumber="1">
                                    <Items>
                                        <ext:Radio ID="rdFirst" runat="server" BoxLabel="Sub1" Checked="true">
                                            <Listeners>
                                                <Change Handler="ValidateStatus();">
                                                </Change>
                                            </Listeners>
                                        </ext:Radio>
                                        <ext:Radio ID="rdSecond" runat="server" BoxLabel="Sub2" Checked="false">
                                            <Listeners>
                                                <Change Handler="ValidateStatus(); ">
                                                </Change>
                                            </Listeners>
                                        </ext:Radio>
                                    </Items>
                                </ext:RadioGroup>
                            </Items>
                        </ext:FieldContainer>
                        <ext:FormPanel ID="formPanelSub1" Title="Sub1" BodyPadding="20" AutoScroll="true" runat="server" ButtonAlign="Left" Layout="FitLayout" Region="Center">
                            <Items>
                                <ext:TextField ID="txtSub1" runat="server" BlankText="sub1 is mandatory" Width="400" AllowBlank="false" FieldLabel="Sub1"></ext:TextField>
                            </Items>
                        </ext:FormPanel>
                        <ext:FormPanel ID="formPanelSub2" Hidden="true" Title="Sub2" BodyPadding="20" AutoScroll="true" runat="server" ButtonAlign="Left" Layout="FitLayout" Region="Center">
                            <Items>
                                <ext:TextField ID="txtSub2" runat="server" BlankText="sub2 is mandatory" Width="400" AllowBlank="false" FieldLabel="Sub2"></ext:TextField>
                            </Items>
                        </ext:FormPanel>
                    </Items>
                    <Buttons>
                        <ext:Button ID="btnSave" runat="server" Text="Save" Icon="DatabaseSave">
                            <DirectEvents>
                                <Click Before="debugger;
                                    if(#{rdFirst}.checked)
                                    {
                                    return #{formPanelSub1}.getForm().isValid();
                                    }
                                    else if(#{rdSecond}.checked)
                                    {
                                    return #{formPanelSub2}.getForm().isValid();
                                    }"
                                    OnEvent="btnSave_OnEvent">
                                </Click>
                            </DirectEvents>
                        </ext:Button>
                    </Buttons>
                    <BottomBar>
                        <ext:StatusBar ID="statusMain" runat="server" meta:resourcekey="statusScheduleCalendarValidationResource1">
                            <Plugins>
                                <ext:ValidationStatus ID="ValidationMain"></ext:ValidationStatus>
                            </Plugins>
                        </ext:StatusBar>
                    </BottomBar>
                </ext:FormPanel>
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Please contact if you need more explanation

    Thank you
    Mohan
  4. #4
    Nov 27, 2013, 3:40 AM
    Unfortunate, ValidationStatus doesn't support it.

    Though, I can suggest to try the following.

    Excluding FormPanel from validation
    var p = App.ValidationMain;

App.formPanelSub2.getForm().getFields().each(function(f) {
    f.originalGetErrors = f.getErrors;
    f.getErrors = function() { return []; }
    p.onFieldValidation(f);
});
    Including excluded FormPanel to validation
    var p = App.ValidationMain;

App.formPanelSub2.getForm().getFields().each(function(f) {
    f.getErrors = f.originalGetErrors;
    p.onFieldValidation(f, true);
});
    Does it work for you?

Similar Threads

  1. Validation Status Error
    By manbaul in forum 2.x Help
    Replies: 2
    Last Post: Apr 27, 2013, 1:29 AM
  2. Saving status of grid with 2 different pages
    By ExecomUsuario in forum 1.x Help
    Replies: 1
    Last Post: Apr 23, 2012, 7:19 PM
  3. Client Side Validation and Validation Status
    By speddi in forum 1.x Help
    Replies: 8
    Last Post: Nov 03, 2011, 11:24 AM
  4. [CLOSED] [1.0] form validation - hidden fields
    By betamax in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Oct 20, 2010, 2:04 PM
  5. Status Bar with integrade form validation
    By flaviodamaia in forum 1.x Help
    Replies: 2
    Last Post: Jun 16, 2009, 5:50 PM

Tags for this Thread

Posting Permissions