This is a migrated thread and some comments may be shown as answers.

[Solved] MetroTouch breaking Form Validation

1 Answer 95 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

willk asked on 15 Feb 2013, 12:57 AM

Hi All,
I'm having trouble with Form Validation when using the MetroTouch skin. I'm using a mix of RequiredFieldValidator/RequiredExpressionValidator controls for my RadTextBox's on a simple registration page. On all the other skins if a user enters text that doesn't meet the validation criteria the error is displayed immediately to the right hand side of the RadTextBox.

However, with the MetroTouch skin nothing is displayed until the RadButton is hit to postback. Also, when you fix something unless you click on another control the error does not go away.

I can reproduce this behaviour on all skins by simply adding this to the style sheet as well:

body

{

font-size:smaller;

}

I'll post my code here so you can test. You shouldn't need the style sheet as the functionality remains broken without it.
Register.aspx

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title>

<link rel="stylesheet" type="text/css" href="styles.css"/>

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="Hay" ShowChooser="True"></telerik:RadSkinManager>

<telerik:RadFormDecorator runat="server" ID="RadFormDecorator1" DecoratedControls="All"></telerik:RadFormDecorator>

<div class="exampleWrapper">

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" MultiPageID="RadMultiPage1" >

<Tabs>

<telerik:RadTab runat="server" Selected="True" Text="Registration" PageViewID="Registration">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="How it works" PageViewID="HowitWorks">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Prizes" PageViewID="Prizes">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" CssClass="multiPage">

<telerik:RadPageView ID="Registration" runat="server">

<br />

<telerik:RadTextBox runat="server" ID="Email" Label="Email:" Width="400px" ></telerik:RadTextBox>

<asp:RegularExpressionValidator ID="emailValidator" ValidationGroup="Registration" 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="Email" CssClass="RegularExpressionValidator"></asp:RegularExpressionValidator>

<asp:RequiredFieldValidator ID="TextBoxRequiredFieldValidator" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="Email" ErrorMessage="Please enter a valid email address!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadTextBox runat="server" ID="Password" Label="Password:" Width="400px" TextMode="Password"></telerik:RadTextBox>

<br /><br />

<telerik:RadTextBox runat="server" ID="ConfirmPassword" Label="Confirm Password:" Width="400px" TextMode="Password"></telerik:RadTextBox>

<asp:CompareValidator ID="valCompPassword" runat="server" ValidationGroup="Registration" ControlToValidate="ConfirmPassword" ControlToCompare="Password" Display="Dynamic" ErrorMessage="Please make sure your passwords match!" CssClass="RegularExpressionValidator" />

<br /><br />

<telerik:RadTextBox runat="server" ID="Firstname" Label="First name:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="Firstname" ErrorMessage="Please enter your first name!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadTextBox runat="server" ID="Surname" Label="Surname:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="Surname" ErrorMessage="Please enter your surname!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadMaskedTextBox runat="server" ID="PhoneNumber" Label="Mobile number:" Width="400px" Mask="####-###-###"></telerik:RadMaskedTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator3" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="PhoneNumber" ErrorMessage="Please enter your mobile number!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator1" ValidationGroup="Registration" runat="server" Display="Dynamic" ErrorMessage="Please enter valid mobile number." ValidationExpression="^[0]\d{3}-\d{3}-\d{3}$" ControlToValidate="PhoneNumber" CssClass="RegularExpressionValidator"></asp:RegularExpressionValidator>

<br /><br />

<telerik:RadMaskedTextBox runat="server" ID="AlternatePhoneNumber" Label="Alternate number:" Width="400px" Mask="####-###-###"></telerik:RadMaskedTextBox>

<br /><br />

<telerik:RadTextBox runat="server" ID="Address" Label="Street Address:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator4" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="Address" ErrorMessage="Please enter your address!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadTextBox runat="server" ID="City" Label="City/Suburb:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator5" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="City" ErrorMessage="Please enter your city/suburb!" CssClass="RegularExpressionValidator"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadTextBox runat="server" ID="Country" Label="Country:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator6" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="Country" ErrorMessage="Please enter your country!" CssClass="RegularExpressionValidator" InitialValue="Australia"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadTextBox runat="server" ID="PostCode" Label="Post Code:" Width="400px"></telerik:RadTextBox>

<asp:RequiredFieldValidator ID="RequiredFieldValidator7" ValidationGroup="Registration" runat="server" Display="Dynamic" ControlToValidate="PostCode" ErrorMessage="Please enter your post code!" CssClass="RegularExpressionValidator" InitialValue="Australia"></asp:RequiredFieldValidator>

<br /><br />

<telerik:RadButton ID="btnRegister" runat="server" Text="Register Now" ValidationGroup="Registration" ButtonType="StandardButton" BackColor="#F9F9F9"></telerik:RadButton>

<p></p>

</telerik:RadPageView>

<telerik:RadPageView ID="HowItWorks" runat="server" ForeColor="White">

<p>HowItWorks</p>

</telerik:RadPageView>

<telerik:RadPageView ID="Prizes" runat="server">

<p>Prizes</p>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</form>

</body>

</html>

[Solved] MetroTouch breaking Form Validation

1 Answer, 1 is accepted