Jun 13, 2012, 8:37 PM
[CLOSED] Form validation is not working correctly
Hello,
I am trying to validate a form but it is not working correctly - it is saying that form is invalid even there are no changes made to it.
In my scenario, I am using the RowEditor PlugIn for editing changes. When I double clicked on a row to edit changes, the selected row changed to the editing view then I removed one of the field's text as you will see in the attached screen shot, then I click on Cancel, my form SHOULD BE VALID, after clicking on the 'Save' Button but its not.
I am trying to validate a form but it is not working correctly - it is saying that form is invalid even there are no changes made to it.
In my scenario, I am using the RowEditor PlugIn for editing changes. When I double clicked on a row to edit changes, the selected row changed to the editing view then I removed one of the field's text as you will see in the attached screen shot, then I click on Cancel, my form SHOULD BE VALID, after clicking on the 'Save' Button but its not.
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" TagPrefix="ext" Namespace="Ext.Net" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
var store = this.GridPanel1.GetStore();
store.DataSource = new List<object>
{
new {
Name = "Bill Foot",
Email = "bill.foot@object.net",
Start = new DateTime(2007, 2, 5),
Salary = 37000,
Active = true
},
new {
Name = "Bill Little",
Email = "bill.little@object.net",
Start = new DateTime(2009, 6, 13),
Salary = 53000,
Active = true
},
new {
Name = "Bob Jones",
Email = "bob.jones@object.net",
Start = new DateTime(2008, 10, 6),
Salary = 70000,
Active = true
},
new {
Name = "Bob Train",
Email = "bob.train@object.net",
Start = new DateTime(2009, 5, 5),
Salary = 68000,
Active = true
},
new {
Name = "Chris Johnson",
Email = "chris.johnson@object.net",
Start = new DateTime(2009, 1, 25),
Salary = 47000,
Active = true
}
};
store.DataBind();
}
}
</script>
<!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>GridPanel with RowEditor Plugin - Ext.NET Examples</title>
<ext:XScript ID="XScript1" runat="server">
<script type="text/javascript">
var validateForm = function(){
if (#{FormPanel1}.getForm().isValid())
Ext.Msg.notify("Valid", "Form is Correct");
else
Ext.Msg.notify("Error", "Form is Incorrect");
}
var addEmployee = function () {
var grid = #{GridPanel1};
grid.getRowEditor().stopEditing();
grid.insertRecord(0, {
name : "New Guy",
email : "guy@object.net",
start : (new Date()).clearTime(),
salary : 50000,
active : true
});
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
grid.getRowEditor().startEditing(0);
}
var removeEmployee = function () {
var grid = #{GridPanel1};
grid.getRowEditor().stopEditing();
var s = grid.getSelectionModel().getSelections();
for (var i = 0, r; r = s[i]; i++) {
#{Store1}.remove(r);
}
}
</script>
</ext:XScript>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<h1>
GridPanel with RowEditor Plugin</h1>
<ext:FormPanel ID="FormPanel1" runat="server" MonitorPoll="500" MonitorValid="true"
Padding="0" ButtonAlign="Center">
<Items>
<ext:GridPanel ID="GridPanel1" runat="server" Width="600" Height="400" AutoExpandColumn="name"
Title="Employees">
<Store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:JsonReader>
<Fields>
<ext:RecordField Name="name" Mapping="Name" Type="String" />
<ext:RecordField Name="email" Mapping="Email" Type="String" />
<ext:RecordField Name="start" Mapping="Start" Type="Date" />
<ext:RecordField Name="salary" Mapping="Salary" Type="Float" />
<ext:RecordField Name="active" Mapping="Active" Type="Boolean" />
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
</Store>
<Plugins>
<ext:RowEditor ID="RowEditor1" runat="server" SaveText="Update" />
</Plugins>
<View>
<ext:GridView ID="GridView1" runat="server" MarkDirty="false" />
</View>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Add Employee" Icon="UserAdd">
<Listeners>
<Click Fn="addEmployee" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Remove Employee" Icon="UserDelete">
<Listeners>
<Click Fn="removeEmployee" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<ColumnModel>
<Columns>
<ext:RowNumbererColumn />
<ext:Column ColumnID="name" Header="First Name" DataIndex="name" Width="220" Sortable="true">
<Editor>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" />
</Editor>
</ext:Column>
<ext:Column Header="Email" DataIndex="email" Width="150">
<Editor>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" Vtype="email" />
</Editor>
</ext:Column>
<ext:DateColumn Header="Start Date" DataIndex="start" Format="MM/dd/yyyy" Width="100"
Sortable="true">
<Editor>
<ext:DateField ID="DateField1" runat="server" AllowBlank="false" MinDate="01.01.2006"
MinText="Can not have a start date before the Company existed." />
</Editor>
</ext:DateColumn>
<ext:NumberColumn Header="Salary" DataIndex="salary" Format="$0,0.00" Width="100"
Sortable="true">
<Editor>
<ext:NumberField ID="NumberField1" runat="server" AllowBlank="false" MinValue="1"
MaxValue="150000" />
</Editor>
</ext:NumberColumn>
<ext:BooleanColumn Header="Active" DataIndex="active" Align="Center" Width="50" TrueText="Yes"
FalseText="No">
<Editor>
<ext:Checkbox ID="Checkbox1" runat="server" />
</Editor>
</ext:BooleanColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>
</Items>
<Buttons>
<ext:Button ID="BtnSave" runat="server" Text="Save" Icon="Disk" CausesValidation="true">
<Listeners>
<Click Fn="validateForm" />
</Listeners>
</ext:Button>
</Buttons>
</ext:FormPanel>
</form>
</body>
</html>
Last edited by Daniil; Jun 20, 2012 at 10:57 AM.
Reason: [CLOSED]