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

Validation and Login Controls

Using RequiredFieldValidator and ValidationSummary controls

 
 

 


Using Login, LoginName, LoginStatus and LoginView controls

 
 
 
This is displayed if the user is not logged in!

Using ChangePassword

Change Your Password
 
 
 

Using CreateUser

Sign Up for Your New Account
 
 
 
 
 
 
  • Demo Configurator
Enable/Disable FormDecorator
Reset Forms

This example shows how RadFormDecorator can be used along with Validation and Login controls. RadFormDecorator will style any standard elements like CheckBox, Textarea, Fieldset, Input, Label, H4, etc. in these controls' templates and will apply visual effects like mouse over and rounded corners thus providing better visual experience.

This page demonstrates how a login form can be beautified without any additional code by utilizing the RadFormDecorator. The actual functionality of the login controls depends on databases and membership providers that will vary from project to project, therefore the demo only mimics the controls by canceling the actual execution of the server-side logic and changing the text in a label as a visual marker.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="Telerik.Web.Examples.FormDecorator.ValidationControls.DefaultVB" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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 href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div id="rfd-demo-zone" class="demo-containers">
        <div class="vlaidationSummary">
            <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" DecoratedControls="All"
                DecorationZoneID="rfd-demo-zone" ControlsToSkip="Zone"></telerik:RadFormDecorator>

            <div class="demo-container size-custom">
                <asp:Panel runat="server" ID="Panel1">
                    <div class="validators">
                        <p><strong>Using RequiredFieldValidator and ValidationSummary controls</strong></p>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RFV1" runat="server" ErrorMessage="Required Field Validator Error Message."
                            ControlToValidate="TextBox1"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Wrong Input"
                            ControlToValidate="TextBox2"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" Display="Dynamic"
                            ErrorMessage="Required Field Validator Error Message." ControlToValidate="TextBox3"></asp:RequiredFieldValidator>
                        <br />
                        <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                        <asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ErrorMessage="Error Message"
                            ControlToValidate="TextBox4"></asp:RequiredFieldValidator>
                    </div>
                    <asp:Button ID="Button1" runat="server" Text="Validate Page"></asp:Button><br /><br />
                    <div style="padding-bottom: 4px;">
                        <asp:ValidationSummary ID="ValidationSummary1" runat="server" EnableViewState="false"></asp:ValidationSummary>
                    </div>
                </asp:Panel>
            </div>

            <div class="demo-container size-custom">
                <asp:Panel runat="server" ID="Panel2">
                    <p><strong>Using Login, LoginName, LoginStatus and LoginView controls</strong></p>
                    <asp:Login ID="Login2" runat="server" Width="100%" EnableViewState="false" OnLoggingIn="Login2_LogginIn">
                        <LayoutTemplate>
                            <table cellpadding="1" cellspacing="0" width="100%">
                                <tr>
                                    <td>
                                        <table cellpadding="0" width="100%">
                                            <tr>
                                                <td>
                                                    <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName"
                                                        ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="Login1"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label>
                                                </td>
                                                <td>
                                                    <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                                                    <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                                                        ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="Login1"></asp:RequiredFieldValidator>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>&nbsp;
                                                </td>
                                                <td>
                                                    <asp:CheckBox ID="RememberMe" runat="server" Text="Remember me next time."></asp:CheckBox>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td align="center" colspan="2" style="color: Red;">
                                                    <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="text-align: right;">
                                                    <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="Log In" ValidationGroup="Login1"></asp:Button>
                                                </td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                            </table>
                        </LayoutTemplate>
                    </asp:Login>
                    <asp:Label ID="LabelLogin" Text="" Font-Size="Large" ForeColor="Green" runat="server"></asp:Label>
                    <div style="margin-top: 5px;">
                        <asp:LoginName ID="LoginName1" runat="server" Width="300px" EnableViewState="false"></asp:LoginName>
                    </div>
                    <div style="margin-top: 5px;">
                        <asp:LoginStatus ID="LoginStatus1" runat="server" Width="300px" EnableViewState="false" Enabled="false"></asp:LoginStatus>
                    </div>
                    <div style="margin-top: 5px;">
                        <asp:LoginView ID="LoginView1" runat="server" EnableViewState="false">
                            <AnonymousTemplate>
                                <div style="height: 40px">
                                    This is displayed if the user is not logged in!
                                </div>
                            </AnonymousTemplate>
                            <LoggedInTemplate>
                                <div style="color: #fff; background-color: #015914; -moz-border-radius: 4px; padding: 4px;">
                                    This is displayed if the user is Logged in!
                                </div>
                            </LoggedInTemplate>
                        </asp:LoginView>
                    </div>
                </asp:Panel>
            </div>

            <div class="demo-container size-custom mtFix">
                <asp:Panel runat="server" ID="Panel3">
                    <p><strong>Using ChangePassword</strong></p>
                    <asp:ChangePassword ID="ChangePassword1" runat="server" Width="385px" EnableViewState="false"
                        OnChangingPassword="ChangePassword1_ChangingPassword">
                    </asp:ChangePassword>
                    <asp:Label ID="LabelChangePassword" Text="" Font-Size="Large" ForeColor="Green" runat="server"></asp:Label>
                </asp:Panel>
            </div>

            <div class="demo-container size-custom mtFix">
                <asp:Panel runat="server" ID="Panel4">
                    <p><strong>Using CreateUser</strong></p>
                    <asp:CreateUserWizard ID="CreateUserWizard2" runat="server" Width="100%" EnableViewState="false"
                        OnCreatingUser="CreateUserWizard2_OnCreatingUser">
                        <WizardSteps>
                            <asp:CreateUserWizardStep ID="CreateUserWizardStep2" runat="server">
                            </asp:CreateUserWizardStep>
                            <asp:CompleteWizardStep ID="CompleteWizardStep2" runat="server">
                            </asp:CompleteWizardStep>
                        </WizardSteps>
                    </asp:CreateUserWizard>
                    <asp:Label ID="LabelCreateUser" Text="" Font-Size="Large" ForeColor="Green" runat="server"></asp:Label>
                </asp:Panel>
            </div>
        </div>
    </div>

    <telerik:RadAjaxManager runat="server" ID="AjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="Configurator1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Configurator1" />
                    <telerik:AjaxUpdatedControl ControlID="RadFormDecorator1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel3" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="Panel4" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <qsf:ConfiguratorPanel runat="server" ID="Configurator1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Title="Enable/Disable FormDecorator" Size="Medium">
                    <qsf:RadioButtonList ID="toggleDecorator" runat="server" AutoPostBack="true" Orientation="Horizontal">
                        <asp:ListItem Text="Enable" Value="1" Selected="True"></asp:ListItem>
                        <asp:ListItem Text="Disable" Value="0"></asp:ListItem>
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Title="Reset Forms" Size="Medium">
                    <qsf:Button runat="server" Text="Reset" Size="Medium" OnClientClicked="TelerikDemo.ResetPage"
                         AutoPostBack="false" CausesValidation="false"></qsf:Button>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance