How to: Validate Edit Form Template Container
This example shows how to validate custom editors, contained within the Edit Form Template Container, on the client. In this sample, we use the ASPxClientEdit.ValidateGroup method to perform client-side validation of editors that belong to the “EditForm” validation group.
<script type="text/javascript">
function OnUpdateClick(editor) {
if(ASPxClientEdit.ValidateGroup("EditForm"))
treeList.UpdateEdit();
}
</script>
<dxwtl:ASPxTreeList ID="ASPxTreeList2" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" KeyFieldName="ID"
ParentFieldName="ParentID" ClientInstanceName="treeList">
<Templates>
<EditForm>
<table style="width: 100%">
<tr>
<td>Department:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox1" runat="server"
Value='<%# Bind("Department") %>'
Width="170px">
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td>Location:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox2" runat="server"
Value='<%# Bind("Location") %>'
Width="170px">
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td>Budget:</td>
<td><dxe:ASPxSpinEdit ID="ASPxSpinEdit1" runat="server" Height="21px" Number="0"
Value='<%# Bind("Budget") %>'>
<ValidationSettings ValidationGroup="EditForm">
</ValidationSettings>
</dxe:ASPxSpinEdit></td>
</tr>
<tr>
<td>Phone:</td>
<td><dxe:ASPxTextBox ID="ASPxTextBox3" runat="server"
Value='<%# Bind("Phone") %>' Width="170px">
<ValidationSettings ValidationGroup="EditForm">
<RegularExpression ErrorText="Wrong phone number"
ValidationExpression="((\(\d{3}\) ?)|(\d{3}-))?\d{3}-\d{4}" />
</ValidationSettings>
</dxe:ASPxTextBox></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:void(0);" onclick="OnUpdateClick(this)">Update</a>
<dxwtl:ASPxTreeListEditFormTemplateReplacement runat="server"
Type="CancelButton"/>
</td>
</tr>
</table>
</EditForm>
</Templates>
<Columns>
<dxwtl:TreeListTextColumn FieldName="Department" VisibleIndex="0">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Budget" VisibleIndex="1">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Location" VisibleIndex="2">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListTextColumn FieldName="Phone" VisibleIndex="3">
</dxwtl:TreeListTextColumn>
<dxwtl:TreeListCommandColumn VisibleIndex="4">
<EditButton Visible="True">
</EditButton>
</dxwtl:TreeListCommandColumn>
</Columns>
<SettingsEditing Mode="EditForm" />
</dxwtl:ASPxTreeList>
To learn more, see Node Validation and Error Indication.