MetroTouch breaking Form Validation

2 posts, 0 answers
  1. willk
    willk avatar
    18 posts
    Member since:
    May 2007

    Posted 14 Feb 2013 Link to this post

    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
    <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>
  2. Vasil
    Admin
    Vasil avatar
    1641 posts

    Posted 19 Feb 2013 Link to this post

    Hello willk,

    I have tested your code using the current beta and it looks alright so I believe it will behave correct using the next official release scheduled for tomorrow.

    Regards,
    Vasil
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top