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

Jquery validation engine not working.

5 Answers 278 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lukus
Top achievements
Rank 1
Lukus asked on 24 Aug 2011, 09:37 PM
I am trying to use a Jquery form validation.  The validation works fine with asp input controls but does nothing with telerik controls. 

Here is my code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test2.aspx.cs" Inherits="Rewrite.Images.test2" %>
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
    <link href="../App_Themes/Default/Default.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
    <script src="../Scripts/jquery-1.6.2.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validationEngine.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validationEngine-en.js" type="text/javascript"></script>
    <title></title>
    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            $(document).ready(function () {
                $("#formID").validationEngine();
            });
 
        </script>
    </telerik:RadScriptBlock>
</head>
<body>
    <form id="formID" runat="server">
    <telerik:RadScriptManager ID="ScriptManager" runat="server" />
    <div style="padding-top: 300px">
        <asp:TextBox ID="txt_First" runat="server" class="validate[required]" /><br />
        <asp:TextBox ID="txt_Second" runat="server" class="validate[required]" /><br />
        <telerik:RadNumericTextBox ID="txt_Numeric" runat="server" class="validate[required]">
        </telerik:RadNumericTextBox><br />
        <asp:TextBox ID="txt_Max" runat="server" class="validate[required],max[100]" /><br />
        <input type="button" id="btn_Submit" title="Submit" /><br />
        <asp:Label ID="lbl_Output" runat="server" Text="" />
    </div>
    </form>
</body>
</html>


I am not sure if I have to point the telerik controls to the Jquery files that I am using or how.

Thanks for your time.

5 Answers, 1 is accepted

Sort by
0
Vasil
Telerik team
answered on 30 Aug 2011, 08:23 AM
Hello Lukus,

I suppose that the validation engine selects controls by their class. But the class attribute is used by RadControls for their styling. And their internally functionality overrides the value that you have set.

So you need to use "CssClass" property of each control instead of "class" attribute to apply the class correctly.
<telerik:RadNumericTextBox ID="txt_Numeric" runat="server" CssClass="validate[required]">

You can fine more information about styling here:
http://www.telerik.com/help/aspnet-ajax/input-styles.html
http://www.telerik.com/help/aspnet-ajax/input-css-width.html

All the best,
Vasil
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

0
John
Top achievements
Rank 1
answered on 17 Feb 2012, 02:45 PM
I ran into this same issue and found that your workaround (to use the CssClass) did not work for the RadMaskedTextBox or RadDatePicker.  Can you provide information on these controls so that the jQuery ValidationEngine plugin can be used with these controls?Thanks
John
0
Vasil
Telerik team
answered on 17 Feb 2012, 04:09 PM
Hello,

It should work correctly with the new rendering of the RadInput. Since the validation input will be the same as the visible one and the style attributes will be applied to it. Try to set EnableSingleInputRendering="true" for your inputs.

Kind regards,
Vasil
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
0
John
Top achievements
Rank 1
answered on 17 Feb 2012, 08:30 PM
It works correctly if you place the "validate" in the correct CssClass. 
This information is for future seekers: RadMaskedTextBox uses the CssClass for the textbox, not the wrapper CssClass.  RadDatePicker is trickier, the validate goes in the "DateInput" CssClass.  I also placed a client event onPopupClosing to focus on the sender.get_id() + "_dateInput_text" if the popup was opened and closed without selecting a date to force the validation to occur.

I appreciate teleriks rapid response but I still had to figure it out.  Needed to check all the CssClasses to get the proper one.
Thanks
0
Vasil
Telerik team
answered on 20 Feb 2012, 09:18 AM
Hello John,

You could actually access the DateInput of the RadDatePicker, and to use it's CssClass.
Markup example:
  <telerik:RadDatePicker runat="server" ID="RadDatePicker1">
    <DateInput runat="server" CssClass="CustomCssClass1">
    </DateInput>
  </telerik:RadDatePicker>
</div>
C# example:
RadDatePicker datePicker = new RadDatePicker();
datePicker.DateInput.CssClass="myCssClass";

All the best,
Vasil
the Telerik team
Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Tags
General Discussions
Asked by
Lukus
Top achievements
Rank 1
Answers by
Vasil
Telerik team
John
Top achievements
Rank 1
Share this question
or