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

[scanbix]

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

[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.

[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" />

[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

[kbwood]

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.

[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

[rdworth]

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();
}

[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();

}

[scott.gonzalez]

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?

[mikesherov]

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