<%@ Page Language="vb" AutoEventWireup="true" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<script runat="server">
Protected Sub RadButton1_Click(sender As Object, e As EventArgs)
RadNotification1.Show()
End Sub
Protected Sub Page_PreRender(sender As Object, e As EventArgs) Handles Me.PreRender
RadSkinManager.GetCurrent(Page).Skin = "Silk"
End Sub
</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>