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

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.

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

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

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.

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

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

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

}

Replying to [comment:8 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?

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

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