Form Validation with Checkboxes

**SaleCar** · Feb 21, 2015, 12:53 AM

I see that there is some probem with validation form with checkboxes... in my case I am trying to reset Dirty status after save and it works for all controls except checkboxes. I have one Save button for 4 forms arranged in tabs, so my code for reset is:

        var dirtyreset = function () {
            App.Form1.getForm().setValues(App.Form1.getForm().getValues());
            App.Form2.getForm().setValues(App.Form2.getForm().getValues());
            App.Form3.getForm().setValues(App.Form3.getForm().getValues());
            App.Form4.getForm().setValues(App.Form4.getForm().getValues());
        }

So what I must add to this code to reset dirty status when uncheck checkbox? I dont have groups, just single checkboxes.
There is workaround in this thread but I dont know to adapt it for my case: http://forums.ext.net/showthread.php...-Checkboxgroup

Just to mention: when I check checkbox, function above reset dirty status, but when unchek it does't.

**SaleCar** · Feb 22, 2015, 12:20 AM

I am still not found solution for this. After uncheck checkbox and click on save button form stays Dirty whatever I do.

This is example code:

<%@ Page Language="vb" %>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Collections.Generic" %>

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

<script runat="server">

    Protected Sub Save(sender As Object, e As DirectEventArgs)
    End Sub

</script>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">

        var dirtycheck = function () {
            App.SaveButton.setDisabled(!App.Form.getForm().isDirty());
            App.SaveButton.setText("Dirty: " + App.Form.getForm().isDirty());
        }


        var dirtyreset = function () {
            App.Form.getForm().setValues(App.Form.getForm().getValues());
            App.SaveButton.setText("Dirty: " + App.Form.getForm().isDirty());
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="sr" />


        <ext:FormPanel
            ID="Form"
            runat="server"
            BodyPadding="5"
            Layout="HBoxLayout"
            TrackResetOnLoad="True">
            <Listeners>
                <DirtyChange Handler="dirtycheck();" />
            </Listeners>
            <Items>
                <ext:FieldSet ID="FieldSet1" runat="server" Border="False" Width="300">
                    <Items>
                        <ext:Checkbox runat="server" FieldLabel="Checkbox" Name="Checkbox1" />
                        <ext:Checkbox runat="server" FieldLabel="Checkbox" Name="Checkbox2" Checked="true" />
                        <ext:TextField runat="server" FieldLabel="Textbox" Name="Textbox" />
                    </Items>
                </ext:FieldSet>
            </Items>
        </ext:FormPanel>

        <ext:Button runat="server" ID="SaveButton" Icon="Disk" Text="Save" StandOut="true" Width="100"
            Disabled="true">
            <DirectEvents>
                <Click OnEvent="Save" Success="dirtyreset();">
                    <ExtraParams>
                        <ext:Parameter Name="Values" Value="App.Form.getForm().getFieldValues()" Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>

    </form>
</body>
</html>

**SaleCar** · Feb 22, 2015, 10:44 AM

I found a solution. There must be two loops, one for checkboxes and another for other controls:

        var dirtyreset = function () {
            App.TabForm.cascade(function (f) {
                if (f.is('form')) {
                    f.getForm().setValues(f.getForm().getValues());
                }
            });
            App.TabForm.cascade(function (f) {
                if (f.is('checkbox')) {
                    f.resetOriginalValue();
                }
            });
        }

**RCN** · Feb 25, 2015, 6:14 PM

You might be able to achieve it by doing the following:

formInstance.getForm().reset();
formInstance.clearInvalid();

**SaleCar** · Feb 25, 2015, 8:56 PM

Reset will revert to old values, I want to keep new values and clear Dirty status.

**Dimitris** · Feb 27, 2015, 8:29 PM

Reset will revert to old values, I want to keep new values and clear Dirty status.

What reset does depends on the value of TrackResetOnLoad:

trackResetOnLoad : Boolean

If set to true, reset() resets to the last loaded or setValues() data instead of when the form was first created.

Defaults to: false

So, the following should work:

<script>
    var dirtyreset = function () {
        App.Form.getForm().setValues(App.Form.getForm().getValues());
        App.Form.getForm().reset();
        App.SaveButton.setText("Dirty: " + App.Form.getForm().isDirty());
    }
</script>

The problem is the way checkboxes are posted. When they are not checked nothing is posted. Use getValues with different properties and the following works:

<%@ Page Language="C#" %>

<script runat="server">
    protected void Save(object sender, DirectEventArgs e)
    {
        
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <script>
        var dirtyreset = function () {
            App.Form.getForm().setValues(App.Form.getForm().getValues(false,false,false,true));
            App.Form.getForm().reset();
            App.SaveButton.setText("Dirty: " + App.Form.getForm().isDirty());
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" Locale="sr" />

        <ext:FormPanel
            ID="Form"
            runat="server"
            BodyPadding="5"
            Layout="HBoxLayout"
            TrackResetOnLoad="true">
            <Items>
                <ext:FieldSet ID="FieldSet1" runat="server" Border="False" Width="300">
                    <Items>
                        <ext:Checkbox runat="server" FieldLabel="Checkbox" Name="Checkbox1"  />
                        <ext:Checkbox runat="server" FieldLabel="Checkbox" Name="Checkbox2" Checked="true" />
                        <ext:TextField runat="server" FieldLabel="Textbox" Name="Textbox" />
                    </Items>
                </ext:FieldSet>
            </Items>
        </ext:FormPanel>

        <ext:Button runat="server" ID="SaveButton" Icon="Disk" Text="Save" StandOut="true" Width="100">
            <DirectEvents>
                <Click OnEvent="Save" Success="dirtyreset();">
                    <ExtraParams>
                        <ext:Parameter Name="Values" Value="App.Form.getForm().getFieldValues()" Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>

**SaleCar** · Mar 01, 2015, 8:44 AM

Yes, it works with

.getValues(false, false, false, true)

but what these arguments mean?

Is there any way to have Intellisense for JS code?

**Dimitris** · Mar 01, 2015, 2:23 PM

The best documentation source is the ExtJS online documentation, as far as I know.

I do not think there is intellisense for ExtJS in VS.

durgaprasadzone · Mar 04, 2015, 6:41 AM

Thanks. I was searching the same information since many months. Thanks for your hard work.

SEO Freelancer
Salkantay Tour
Machupicchu Tours
Inca trail Machupicchu

Thread: Form Validation with Checkboxes

Thread Tools

Search Thread

Display

Form Validation with Checkboxes

Similar Threads

[CLOSED] Form validation including form on user control

[CLOSED] Model validation in Form

Form Validation Problem

form validation problem

Login form - validation form

Posting Permissions

Sitemap

Downloads

Resources

Thread: Form Validation with Checkboxes

Form Validation with Checkboxes

Similar Threads

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us