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

Form Integration

Registration form
Username:
Email
Date of birth: (Optional)
Signature:

This demo about the Telerik UI for ASP.NET AJAX RadSignature component demonstrates how to integrate the Signature component in a form and validate its content via asp:CustomValidator.

  • DefaultCS.aspx
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<script runat="server">

    protected void RadButton1_Click(object sender, EventArgs e)
    {
        RadNotification1.Show();
    }

    protected void Page_PreRender(object sender, EventArgs e)
    {
        RadSkinManager.GetCurrent(Page).Skin = "Silk";
    }
</script>


<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <style>
        .FormContainer > td > .RadSignature {
            display: inline-block;
        }
    </style>

    <div class="demo-container-small">
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecorationZoneID="wrapper1" />
        <div id="wrapper1">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" CssClass="demo-container size-narrow" LoadingPanelID="RadAjaxLoadingPanel1">
                <fieldset>
                    <legend>Registration form</legend>
                    <br />
                    <table border="0" cellpadding="5">
                        <colgroup>
                            <col width="100" />
                            <col />
                        </colgroup>
                        <tr class="FormContainer">
                            <td>Username:
                            </td>
                            <td>
                                <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Width="170px" Text="johny"></telerik:RadTextBox>
                                <asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" runat="server" Display="Dynamic"
                                    ControlToValidate="RadTextBox1" ErrorMessage="The textbox cannot be empty" ForeColor="Red"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr class="FormContainer">
                            <td valign="top">Email
                            </td>
                            <td>
                                <telerik:RadTextBox RenderMode="Lightweight" ID="Radtextbox2" runat="server" Width="170px" Text="john.doe@email.com"></telerik:RadTextBox>
                                <asp:RegularExpressionValidator ID="emailValidator" runat="server" Display="Dynamic"
                                    ErrorMessage="Please enter valid e-mail address" ValidationExpression="^[\w\.\-]+@[a-zA-Z0-9\-]+(\.[a-zA-Z0-9\-]{1,})*(\.[a-zA-Z]{2,3}){1,2}$"
                                    ControlToValidate="Radtextbox2" ForeColor="Red">
                                </asp:RegularExpressionValidator>
                                <asp:RequiredFieldValidator ID="Requiredfieldvalidator1" runat="server" Display="Dynamic"
                                    ControlToValidate="Radtextbox2" ErrorMessage="Please enter an e-mail" ForeColor="Red"></asp:RequiredFieldValidator>
                            </td>
                        </tr>
                        <tr class="FormContainer">
                            <td>Date of birth: <em>(Optional)</em>
                            </td>
                            <td>
                                <telerik:RadDatePicker RenderMode="Lightweight" ID="RadDatePicker1" runat="server" DateFormat="d" MinDate="01/01/1990" Width="170px"
                                    MaxDate="01/01/3000" SelectedDate='1/18/2023' >
                                </telerik:RadDatePicker>
                            </td>
                        </tr>
                        <tr class="FormContainer">
                            <td>Signature:
                            </td>
                            <td>
                                <telerik:RadSignature runat="server" ID="RadSignature1" Width="170px">
                                </telerik:RadSignature>
                                <asp:CustomValidator runat="server" ErrorMessage="*Signature is required" ForeColor="Red" ClientValidationFunction="validateSignature" EnableClientScript="true" />
                            </td>
                        </tr>
                    </table>
                    <hr />
                    <div style="text-align: center">
                        <telerik:RadButton runat="server" ID="RadButton1" Text="Submit" Primary="true" AutoPostBack="true" OnClick="RadButton1_Click" />
                        <telerik:RadButton runat="server" ID="RadButton2" Text="Clear" AutoPostBack="false" OnClientClicked="clearFields" />
                    </div>
                </fieldset>
                <telerik:RadNotification runat="server" ID="RadNotification1" Text="Form submitted successfully!" Position="Center"></telerik:RadNotification>
            </telerik:RadAjaxPanel>
        </div>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    </div>
    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script>
            function validateSignature(source, args) {
                signature = $telerik.findControl(document, "RadSignature1");
                var focusedSignatureDefaultContent = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAVQAAACoCAYAAAC/tRZjAAAAAXNSR0IArs4c6QAABWFJREFUeF7t1LEJADAMBLF4/6EdyAq5Uh7gC2FudnePI0CAAIFvgRHUb0MDBAgQeAKC6hEIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAoLqBwgQIBAJCGoEaYYAAQKC6gcIECAQCQhqBGmGAAECguoHCBAgEAkIagRphgABAhc9UJ4nJKldUwAAAABJRU5ErkJggg==";

                if (signature.get_value() && signature.get_value() !== focusedSignatureDefaultContent) {
                    args.IsValid = true;
                } else {
                    args.IsValid = false;
                    return;
                }
            }
            function clearFields(sender, args) {
                usernameTextBox = $find("<%= RadTextBox1.ClientID %>");
                usernameTextBox.clear();
                emailTextBox = $find("<%= Radtextbox2.ClientID %>");
                emailTextBox.clear();
                datePicker = $find("<%= RadDatePicker1.ClientID %>");
                datePicker.clear();
                signature = $find("<%= RadSignature1.ClientID %>");
                signature.set_value('')
            }
        </script>
    </telerik:RadScriptBlock>

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

Support & Learning Resources

Find Assistance