I have jquery method that will validate all the controls inside of a panel. It works fine for all the controls but RadDatePicker doesnt work.
The CssClass is set to "required" is overwritten by control's default class. It works fine for DateInput control as class is appended.
Here is the code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" />
</head>
<body>
<p>
</p>
<form id="form1" runat="server">
<asp:ScriptManager ID="RadScriptManager1" runat="server">
<Scripts>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
<asp:ScriptReference Path="~/Scripts/jquery.validate.js" />
<asp:ScriptReference Path="~/Scripts/additional-methods.js" />
</Scripts>
</asp:ScriptManager>
<script type="text/javascript">
$(document).ready(function() {
// Initialize validation on the entire ASP.NET form.
$("#form1").validate({
// This prevents validation from running on every
// form submission by default.
onsubmit: false
});
// Search for controls marked with the causesValidation flag
// that are contained anywhere within elements marked as
// validationGroups, and wire their click event up.
$('.validationGroup .causesValidation').click(ValidateAndSubmit);
// Select any input[type=text] elements within a validation group
// and attach keydown handlers to all of them.
$('.validationGroup :text').keydown(function(evt) {
// Only execute validation if the key pressed was enter.
if (evt.keyCode == 13) {
ValidateAndSubmit(evt);
}
});
});
function ValidateAndSubmit(evt) {
// Ascend from the button that triggered this click event
// until we find a container element flagged with
// .validationGroup and store a reference to that element.
var $group = $(evt.currentTarget).parents('.validationGroup');
var isValid = true;
// Descending from that .validationGroup element, find any input
// elements within it, iterate over them, and run validation on
// each of them.
$group.find(':input').each(function(i, item) {
if (!$(item).valid())
isValid = false;
});
// If any fields failed validation, prevent the button's click
// event from triggering form submission.
if (!isValid)
evt.preventDefault();
}
</script>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<div>
<asp:Panel ID="Panel1" runat="server" CssClass="validationGroup">
<asp:TextBox ID="TextBox1" CssClass="required" runat="server"></asp:TextBox>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="required">
<asp:ListItem Text="Select One" Value=""></asp:ListItem>
<asp:ListItem Text="test 1" Value="1"></asp:ListItem>
</asp:DropDownList>
<telerik:RadDatePicker ID="RadDatePicker1" CssClass="required" runat="server">
</telerik:RadDatePicker>
<telerik:RadDateInput ID="RadDateInput1" CssClass="required" runat="server">
</telerik:RadDateInput>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" CssClass="causesValidation" />
<input id="Reset1" type="reset" value="reset" />
</asp:Panel>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</div>
</form>
</body>
</html>
3 Answers, 1 is accepted
While for RadDateInput the CssClass you specify in the control markup is appended to the visible <input> element of the rendered control, the same is not true for RadDatePicker. The latter appends the CssClass you specify to the parent wrapper <div> element. You need to have that in mind.
Regards,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Rank 1
What is the alternate solution? Should i handle DatePicker's render event, get the html and set the class?
That will not be necessary. You can simply use the CssClass of the DateInput inside the RadDatePicker:
<telerik:RadDateInput ID="RadDateInput1" runat="server" CssClass="required"></telerik:RadDateInput><telerik:RadDatePicker ID="RadDatePicker1" runat="server"> <DateInput CssClass="required"></DateInput></telerik:RadDatePicker>Best wishes,
Veli
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.