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

Required RadDatePicker passes validation if user navigates to new tab without leaving field

8 Answers 152 Views

Calendar

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

Blair asked on 27 Nov 2014, 06:28 PM

If you have a RadDatePicker with a asp:RequiredFieldValidator and when the user clicks a different RadTabStrip it calls Page_ClientValidate, the validator returns true even if the field is blank. However, it fails when you try to go back to the original tab causing you to never be able to fix the problem

Code below. Steps to reproduce:

1) Blank out the date but leave the cursor in the field - do not tab out or hit enter or cause a blur()
2) Click tab 2. Tab 2 loads
3) Click tab 1. Tab 1 does not load and you get a validation error "Close date is required"

I need this to work and do not know how to make it operate correctly in this case.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

<asp:ScriptManager ID="Scriptmanager1" runat="server" />

<script type="text/javascript">

function ClientTabSelecting(sender, args) {

//This is mandatory to do some other stuff.

var isvalid = Page_ClientValidate();

if (isvalid) {

//

} else {

args.set_cancel(true);

}

</script>

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

<Tabs>

<telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />

<telerik:RadTab ID="TAB2" Text="Tab 2" runat="server" />

</Tabs>

</telerik:RadTabStrip>

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

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

<telerik:RadDatePicker ID="CloseDate1" runat="server" CausesValidation="True" SelectedDate="2014-11-1"></telerik:RadDatePicker>

<asp:RequiredFieldValidator runat="server" Text="This field is mandatory" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>

</telerik:RadPageView>

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

You Should Never See This if the date entered is before 2014

<asp:Button runat="server" ID="Button1" CausesValidation="True"/>

</telerik:RadPageView>

</telerik:RadMultiPage>

<asp:ValidationSummary runat="server" ID="summary" />

</div>

</form>

</body>

</html>

8 Answers, 1 is accepted

answered on 11 Dec 2014, 02:03 PM

Hi Blair,

The reason for this behavior is that the input element is still on focus when you change the tabs and that is why the validation pass. Basically you have to blur the input element when you click the next tab. You can achieve that by using the following approach.

function ClientTabSelecting(sender, args) {

//This is mandatory to do some other stuff.

document.activeElement.blur();

var isvalid = Page_ClientValidate();

if (isvalid) {

//

} else {

args.set_cancel(true);

}

Regards,
Kostadin
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

answered on 22 Dec 2014, 12:09 PM

Hello Blair,

We have find a bug in the RadTabStrip. That causes stopping of the default event (in this case the blur of the TextBox), therefore the value of the input is not properly updated.

To fix it you can override the _mouseDown event handler of the RadTabStrip using this code:

Telerik.Web.UI.RadTabStrip.prototype._mouseDown = function(){};

And it will start to work correct.

If you want to can remove all the other workarounds and set CausesValidation=true for the TabStrip.
Here is the modified version of your original code:

<asp:ScriptManager ID="Scriptmanager1" runat="server" />

<script type="text/javascript">

Telerik.Web.UI.RadTabStrip.prototype._mouseDown = function () { };

function ClientTabSelecting(sender, args) {

var isvalid = window.Page_ClientValidate();

if (!isvalid) {

args.set_cancel(true);

}

</script>

<telerik:RadTabStrip CausesValidation="true" ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" OnClientTabSelecting="ClientTabSelecting" SelectedIndex="0">

<Tabs>

<telerik:RadTab ID="TAB1" Text="Tab 1" runat="server" PageViewID="HeaderPage" />

<telerik:RadTab ID="TAB2" Text="Tab 2" runat="server" />

</Tabs>

</telerik:RadTabStrip>

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

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

<telerik:RadDatePicker ID="CloseDate1" runat="server" CausesValidation="True" SelectedDate="2014-11-1"></telerik:RadDatePicker>

<asp:RequiredFieldValidator runat="server" Text="This field is mandatory" ControlToValidate="CloseDate1" ErrorMessage="Close date is required"></asp:RequiredFieldValidator>

</telerik:RadPageView>

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

You Should Never See This if the date entered is before 2014

<asp:Button runat="server" ID="Button1" CausesValidation="True" />

</telerik:RadPageView>

</telerik:RadMultiPage>

<asp:ValidationSummary runat="server" ID="summary" />

Regards,
Vasil
Telerik

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.