New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Validation Groups

  • Save Draft
  • Send

You can assign a group name to a set of validators to ensure that validation occurs only for controls in the specified group. This enables you to have multiple separately-validated forms on a single page.

RadToolBar provides the ability to specify validation-related properties per button item (RadToolBarButton or RadToolBarSplitButton). If these not set, validation properties of the RadToolBar control itself are taken into account. You can use the ValidationGroup property when you want to perform separate validation tasks on the same page.

By default, all validators are in the "" group (the default group) for backward compatibility.

  • DefaultCS.aspx
  • styles.css
<%@ Page AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <div id="toolBarWrapper">
            <telerik:RadToolBar RenderMode="Lightweight" runat="server" ID="RadToolBar1" Skin="Office2007" Width="667px">
                <Items>
                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/ValidationGroups/images/save.gif"
                        Text="Save Draft" ValidationGroup="SaveValidationGroup">
                    </telerik:RadToolBarButton>
                    <telerik:RadToolBarButton ImageUrl="~/ToolBar/Examples/Functionality/ValidationGroups/images/send.gif"
                        Text="Send" ValidationGroup="SendValidationGroup">
                    </telerik:RadToolBarButton>
                </Items>
            </telerik:RadToolBar>
        </div>
        <div id="toField" class="textFieldContainer">
            <div class="emailLabel">
                <asp:Label runat="server" style="font-size:12px;" AssociatedControlID="txtTo">To:</asp:Label>
            </div>
            <asp:RequiredFieldValidator runat="server" CssClass="qsfexErrorMessage" ID="txtToRequiredFieldValidator"
                ControlToValidate="txtTo" Display="Dynamic" ValidationGroup="SendValidationGroup"
                ErrorMessage="<input class='errMsgInline' onfocus='removeOverlay(event)' />"></asp:RequiredFieldValidator>
            <asp:TextBox runat="server" CssClass="textBox" ID="txtTo"></asp:TextBox>
        </div>
        <div id="ccField" class="textFieldContainer">
            <div class="emailLabel">
                <asp:Label runat="server" style="font-size:12px;" AssociatedControlID="txtCc">CC:</asp:Label>
            </div>
            <asp:TextBox runat="server" CssClass="textBox" ID="txtCc"></asp:TextBox>
        </div>
        <div id="subjectField" class="textFieldContainer">
            <div class="emailLabel">
                <asp:Label runat="server" style="font-size:12px;" AssociatedControlID="txtSubject">Subject:</asp:Label>
            </div>
            <asp:RequiredFieldValidator runat="server" CssClass="qsfexErrorMessage" ID="txtSubjectRequiredFieldValidator"
                ControlToValidate="txtSubject" Display="Dynamic" ValidationGroup="SendValidationGroup"
                ErrorMessage="<input class='errMsgInline' onfocus='removeOverlay(event)' />"></asp:RequiredFieldValidator>
            <asp:RequiredFieldValidator runat="server" CssClass="qsfexErrorMessage" ID="RequiredFieldValidator1"
                ControlToValidate="txtSubject" Display="Dynamic" ValidationGroup="SaveValidationGroup"
                ErrorMessage="<input class='errMsgInline' onfocus='removeOverlay(event)' />"></asp:RequiredFieldValidator>
            <asp:TextBox runat="server" ID="txtSubject" CssClass="textBox"></asp:TextBox>
        </div>
        <div id="bodyField">
            <asp:Label ID="Label1" runat="server" AssociatedControlID="txtBody" Style="display: none">Body:</asp:Label>
            <asp:RequiredFieldValidator runat="server" CssClass="qsfexErrorMessage" ID="txtBodyRequiredFieldValidator"
                ControlToValidate="txtBody" Display="Dynamic" ValidationGroup="SendValidationGroup"
                ErrorMessage="<input class='errMsgInline' onfocus='removeOverlay(event)' />"></asp:RequiredFieldValidator>
            <asp:TextBox runat="server" ID="txtBody" TextMode="multiline" Rows="8" Columns="80"
                CssClass="textArea"></asp:TextBox>
        </div>
    </div>
    <script type="text/javascript">
        function removeOverlay(e) {
            if (!e) e = window.event;
            if (!e.target) e.target = e.srcElement;

            e.target.blur();

            e.target.parentNode.style.display = "none";

            var container = e.target.parentNode.parentNode;

            var field = container.getElementsByTagName('textarea')[0];

            if (!field) {
                var inputs = container.getElementsByTagName('input');
                field = inputs[inputs.length - 1];
            }

            field.focus();
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance