Opened 11 years ago

Closed 7 years ago

Last modified 6 years ago

#4071 closed bug (wontfix)

Datepicker and ASP.Net validators. Error: 'length' is null or not an object

Reported by: scanbix Owned by:
Priority: major Milestone: 1.11.0
Component: ui.datepicker Version: 1.6rc6
Keywords: 'length' is null or not an object Cc:
Blocked by: Blocking:

Description

I use ASP.NET 1.1 SP1 for my web page. And for date field I have native ASP.NET 1.1 validation. In general datepicker works. But when I select date, then I get folowing error. With firefox 3, same page works flawlesly, no conflicts with ASP.NET validation.

Webpage Script Errors

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.2; .NET CLR 1.1.4322; FDM) Timestamp: Fri, 6 Feb 2009 07:06:39 UTC

Message: 'length' is null or not an object Line: 139 Char: 17 Code: 0 URI: http://localhost/aspnet_client/system_web/1_1_4322/WebUIValidation.js

Change History (14)

comment:1 Changed 11 years ago by rdworth

Milestone: 1.71.8

comment:2 Changed 11 years ago by ajacksified

To narrow it down a bit: it seems that it only happens when validation controls are attached to the box, in IE6 and 7. I've noticed this as well in .NET 3.5.

comment:3 Changed 11 years ago by cblaze22

I second this bug. This is a big problem with the compare validator validator for date.

<label>

Birthdate</label><br />

<asp:TextBox runat="server" ID="tbBirthdate" MaxLength="10" CssClass="text datePicker" /> <asp:CompareValidator runat="server" ID="rfvBirthdate" ControlToValidate="tbBirthdate"

ErrorMessage="Significant Other Birthdate" Display="None" ValidationGroup="vgPersons" Type="Date" Operator="DataTypeCheck" />

comment:4 Changed 11 years ago by BeSt

Hi, I found three main workarounds searching on Google:

1 - add an empty onSelect event to the datepicker

http://code.google.com/p/jquery-datepicker/issues/detail?id=56

2 - modify DatePicker script source for IE as in http://www.andrewrowland.com/article/display/ui-datepicker-dotnot-validator-problem

3 - disable validator client validation

I successfully use first solution because I don't want to edit source code and I want client validation enabled.

Sorry for my poor english...(italian version of this workaround: http://blog.be-st.it/post.aspx?id=0bb76431-2825-412e-ae79-e37c5d54735e

comment:5 Changed 10 years ago by kbwood

Resolution: wontfix
Status: newclosed

This appears to be a problem with either the jQuery trigger function or the ASP validation code, rather than the datepicker itself. The datepicker is merely notifying a change in value by triggering the 'change' event on the input field. When this eventually reaches the ASP code the list of validators for the targetted control is empty - resulting in the error.

comment:6 Changed 10 years ago by rdworth

Resolution: wontfix
Status: closedreopened

comment:7 Changed 10 years ago by rdworth

Though not clear whether the true source of the problem is in Internet Explorer or in the ASP.Net Validator code, Internet Explorer is getting event.srcElement as the A that gets clicked on to select a date, rather than the original INPUT element.

The fix is to use createEventObject and fireEvent in Internet explorer, rather than .change(), supplying the INPUT element as the target property of the event object. For more, see http://stackoverflow.com/questions/1704398/jquery-datepicker-popup-not-closing-on-select-date-in-ie8/1975858#1975858

comment:8 Changed 10 years ago by rdworth

Summary: 'length' is null or not an objectDatepicker and ASP.Net validators. Error: 'length' is null or not an object

Created visual test page:

http://jquery-ui.googlecode.com/svn/trunk/tests/visual/datepicker/datepicker_ticket_4071.html

The workaround is to use .fireEvent('onchange') instead of .change()

onSelect: function() {
  this.fireEvent && this.fireEvent('onchange') || $(this).change();
}

comment:9 Changed 10 years ago by ben.mcintyre

(Copy of stackoverflow post) This is an endemic problem with jQuery datepickers and ASP validation controls. The wrong element cross-triggers an ASP NET javascript validation routine, and then the M$ code throws an error because the triggering element in the routine is undefined.

I solved this one differently from anyone else I have seen - by deciding that M$ should have written their code more robustly, and hence redeclaring some of the M$ validator code to cope with the undefined element. Everything else I have seen is essentially a workaround on the jQuery side, and cuts possible functionality out (eg. using the click event instead of change).

The bit that fails is

for (i = 0; i < vals.length; i++) {

ValidatorValidate(vals[i], null, event);

}

which throws an error when it tries to get a length for the undefined 'vals'.

I just added

if (vals) {

for (i = 0; i < vals.length; i++) {

ValidatorValidate(vals[i], null, event);

}

}

and she's good to go. Final code, which redeclares the entire offending function, is below. I put it as a script include at the bottom of my master page or page.

Yes, this does break upwards compatibility if M$ decide to change their validator code in the future. But one would hope they'll fix it and then we can get rid of this patch altogether.

Fix issue with datepicker and ASPNET validators: redeclare MS validator code with fix

function ValidatorOnChange(event) {

if (!event) {

event = window.event;

} Page_InvalidControlToBeFocused = null; var targetedControl; if ((typeof (event.srcElement) != "undefined") && (event.srcElement != null)) {

targetedControl = event.srcElement;

} else {

targetedControl = event.target;

} var vals; if (typeof (targetedControl.Validators) != "undefined") {

vals = targetedControl.Validators;

} else {

if (targetedControl.tagName.toLowerCase() == "label") {

targetedControl = document.getElementById(targetedControl.htmlFor); vals = targetedControl.Validators;

}

} var i; if (vals) {

for (i = 0; i < vals.length; i++) {

ValidatorValidate(vals[i], null, event);

}

} ValidatorUpdateIsValid();

}

comment:10 in reply to:  8 Changed 8 years ago by Scott González

Replying to rdworth:

The workaround is to use .fireEvent('onchange') instead of .change()

@rdworth That sounds bad. We shouldn't be working at that level in UI. Are you sure you really want this ticket open?

comment:11 Changed 7 years ago by Scott González

Milestone: 1.9.01.11.0

comment:12 Changed 7 years ago by mikesherov

Status: reopenedopen

comment:13 Changed 7 years ago by mikesherov

Resolution: wontfix
Status: openclosed

I agree with scott that this is not a jQuery UI bug here. If anyone feels strongly, please feel free to reopen.

comment:14 Changed 6 years ago by janicelagundi

Try to add an empty onSelect handler to fix the issue : onSelect: function() {} For more info : http://stackoverflow.com/questions/1704398/jquery-datepicker-popup-not-closing-on-select-date-in-ie8

Note: See TracTickets for help on using tickets.