<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="RegistrationForm.aspx.cs" Inherits="FormLayout_RegistrationForm" %> <asp:Content ID="localCss" ContentPlaceHolderID="CustomHeadHolder" runat="server"> <style type="text/css"> .formLayoutContainer { 700px; margin: auto; } .layoutGroupBoxCaption { font-size: 16px; } </style> </asp:Content> <asp:Content ID="MainContent" ContentPlaceHolderID="ContentHolder" runat="server"> <script type="text/javascript"> // <![CDATA[ var passwordMinLength = 6; function GetPasswordRating(password) { var result = 0; if (password) { result++; if (password.length >= passwordMinLength) { if (/[a-z]/.test(password)) result++; if (/[A-Z]/.test(password)) result++; if (/d/.test(password)) result++; if (!(/^[a-z0-9]+$/i.test(password))) result++; } } return result; } function OnPasswordTextBoxInit(s, e) { ApplyCurrentPasswordRating(); } function OnPassChanged(s, e) { ApplyCurrentPasswordRating(); } function ApplyCurrentPasswordRating() { var password = passwordTextBox.GetText(); var passwordRating = GetPasswordRating(password); ApplyPasswordRating(passwordRating); } function ApplyPasswordRating(value) { ratingControl.SetValue(value); switch (value) { case 0: ratingLabel.SetValue("Password safety"); break; case 1: ratingLabel.SetValue("Too simple"); break; case 2: ratingLabel.SetValue("Not safe"); break; case 3: ratingLabel.SetValue("Normal"); break; case 4: ratingLabel.SetValue("Safe"); break; case 5: ratingLabel.SetValue("Very safe"); break; default: ratingLabel.SetValue("Password safety"); } } function GetErrorText(editor) { if(editor === passwordTextBox) { if (ratingControl.GetValue() === 1) return "The password is too simple"; } else if(editor === confirmPasswordTextBox) { if (passwordTextBox.GetText() !== confirmPasswordTextBox.GetText()) return "The password you entered do not match"; } return ""; } function OnPassValidation(s, e) { var errorText = GetErrorText(s); if (errorText) { e.isValid = false; e.errorText = errorText; } } // ]]> </script> <div class="formLayoutContainer"> <dx:ASPxFormLayout runat="server" RequiredMarkDisplayMode="Auto" Styles-LayoutGroupBox-Caption-CssClass="layoutGroupBoxCaption" AlignItemCaptionsInAllGroups="true" Width="100%"> <Items> <dx:LayoutGroup Caption="Registration Data" GroupBoxDecoration="HeadingLine" SettingsItemCaptions-HorizontalAlign="Right"> <Items> <dx:LayoutItem Caption="Name"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <table> <tr> <td style="padding-right:5px;"> <dx:ASPxTextBox ID="firstNameTextBox" runat="server" NullText="First Name" Width="170"> <ValidationSettings Display="Dynamic" RequiredField-IsRequired="true" ErrorDisplayMode="Text" SetFocusOnError="true" /> </dx:ASPxTextBox> </td> <td> <dx:ASPxTextBox ID="lastNameTextBox" runat="server" NullText="Last Name" Width="170"> <ValidationSettings Display="Dynamic" RequiredField-IsRequired="true" ErrorDisplayMode="Text" SetFocusOnError="true" /> </dx:ASPxTextBox> </td> </tr> </table> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption="Gender"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxRadioButtonList ID="genderRadioButtonList" runat="server" RepeatDirection="Horizontal"> <Items> <dx:ListEditItem Text="Male" Value="1" /> <dx:ListEditItem Text="Female" Value="2" /> </Items> <Border BorderStyle="None" /> </dx:ASPxRadioButtonList> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption="Country" > <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxComboBox runat="server" ID="countryComboBox" DropDownStyle="DropDownList" IncrementalFilteringMode="StartsWith" DataSourceID="AccessDataSourceCountry" TextField="Country" ValueField="Country" /> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> </Items> </dx:LayoutGroup> <dx:LayoutGroup Caption="Authorization Data" GroupBoxDecoration="HeadingLine" SettingsItemCaptions-HorizontalAlign="Right" ColCount="2"> <Items> <dx:LayoutItem Caption="E-mail" ColSpan="2"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxTextBox runat="server" ID="eMailTextBox" Width="170"> <ValidationSettings ErrorDisplayMode="Text" Display="Dynamic" ErrorTextPosition="Bottom" SetFocusOnError="true"> <RegularExpression ErrorText="Invalid e-mail" ValidationExpression="w+([-+.']w+)*@w+([-.]w+)*.w+([-.]w+)*" /> <RequiredField IsRequired="True" ErrorText="The value is required" /> </ValidationSettings> </dx:ASPxTextBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption="Password"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxTextBox ID="passwordTextBox" runat="server" ClientInstanceName="passwordTextBox" Password="true" Width="170"> <ValidationSettings ErrorTextPosition="Bottom" ErrorDisplayMode="Text" Display="Dynamic" SetFocusOnError="true"> <RequiredField IsRequired="True" ErrorText="The value is required" /> </ValidationSettings> <ClientSideEvents Init="OnPasswordTextBoxInit" KeyUp="OnPassChanged" Validation="OnPassValidation" /> </dx:ASPxTextBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem ShowCaption="False"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <table> <tr> <td> <dx:ASPxRatingControl ID="ratingControl" runat="server" ReadOnly="true" ItemCount="5" Value="0" ClientInstanceName="ratingControl" /> </td> <td style="padding-left:5px;100px"> <dx:ASPxLabel ID="ratingLabel" runat="server" ClientInstanceName="ratingLabel" Text="Password safety" /> </td> </tr> </table> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption="Confirm password" ColSpan="2"> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxTextBox ID="confirmPasswordTextBox" runat="server" ClientInstanceName="confirmPasswordTextBox" Password="true" Width="170"> <ValidationSettings ErrorTextPosition="Bottom" ErrorDisplayMode="Text" Display="Dynamic" SetFocusOnError="true"> <RequiredField IsRequired="True" ErrorText="The value is required" /> </ValidationSettings> <ClientSideEvents Validation="OnPassValidation" /> </dx:ASPxTextBox> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> </Items> </dx:LayoutGroup> <dx:LayoutGroup ShowCaption="False" GroupBoxDecoration="HeadingLine" SettingsItemCaptions-HorizontalAlign="Right"> <Items> <dx:LayoutItem Caption=" "> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxCaptcha runat="server" ID="captcha" TextBox-Position="Bottom" TextBox-ShowLabel="false" TextBoxStyle-Width="170"> <ValidationSettings ErrorDisplayMode="Text" Display="Dynamic" SetFocusOnError="true"> <RequiredField IsRequired="True" ErrorText="The value is required" /> </ValidationSettings> </dx:ASPxCaptcha> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:LayoutItem Caption=" "> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <span>By clicking "Sign Up" you agree to <a href="javascript:;">privacy policy</a> and <a href="javascript:;">terms of use</a></span> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> <dx:EmptyLayoutItem Height="20" /> <dx:LayoutItem Caption=" "> <LayoutItemNestedControlCollection> <dx:LayoutItemNestedControlContainer> <dx:ASPxButton runat="server" ID="signUp" Text="Sign Up" Width="100px" /> </dx:LayoutItemNestedControlContainer> </LayoutItemNestedControlCollection> </dx:LayoutItem> </Items> </dx:LayoutGroup> </Items> </dx:ASPxFormLayout> </div> <asp:AccessDataSource ID="AccessDataSourceCountry" runat="server" DataFile="~/App_Data/WorldCities.mdb" SelectCommand="SELECT * FROM [Countries] ORDER BY [Country]" /> </asp:Content>
using System; using System.Web.UI; using DevExpress.Web.ASPxClasses; using DevExpress.Web.ASPxEditors; public partial class FormLayout_RegistrationForm : Page { protected void Page_Load(object sender, EventArgs e) { if (IsPostBack && captcha.IsValid && ASPxEdit.ValidateEditorsInContainer(this)) Page.ClientScript.RegisterStartupScript(this.GetType(), "alert", @"<script type=""text/javascript"">alert('You have successfully registered');</script>"); } }