Asp.Net Validation on jQuery datepicker date selection

Friday, October 22, 2010

Scenario:

I was using jQuery datepicker for one on my test project. The asp.net textbox it was linked to was having RequiredFieldValidator(RFV) and a RegularExpressionValidaton(REV).

If I simply press my button without entering anything in the textbox, the RFV would fire and show me the error message. Now when I selected a date from the jquery datepicker the error message still stayed there which I wanted it to disappear. The same thing happened for REV as well i.e.after selecting a date using datepicker, if I manually change it to some invalid date, the REV would fire-up and show me the regex error message. But upon re-selecting a valid date from the datepicker, the message won't go.

After searching the web, here is what I came up with.

First Attempt:

//Find asp.net TextBox and hook it up with datepicker
//Initialize the datepicker with onSelect event
$("[id$='_txtDate']").datepicker({
  onSelect: onSelectHandler
 });

//the onselectHandler with flaw

function onSelectHandler() {
 if (typeof(Page_ClientValidate) == 'function')
     Page_ClientValidate($(this).attr('id')); 
}

Explanation 1:

The first block/ function is where I hookup my textbox with the jQuery datepicker. Note the syntax ($("[id$='_txtDate']")) I am using to find my asp.net TextBox. Initialize the datepicker and set the handler for onSelect event. This is the event that is fired when you select a date in the datepicker.

The onSelectHandler is the function that is called when onSelect event is fired. Here we see if we have a client-side validation function and if there is one then call that function pass the id of our textbox. We get that via $(this).attr('id'). this refers to our textbox instance. That's it, if the value is valid the error message will disappear.

This was my first attempt assuming I have got it right but no it had a flaw. The Page_ClientValidate function takes a 'validationgroup' as a parameter. So from my standpoint I was passing a "control id" but the function won't. Since it could not find any match for the value I was passing, it wasn't actually validating but just ignoring the validation and passing back true i.e. everything is valid. This causes every validation message to be made hidden.

Second attempt:

So now I knew that my only option is to somehow get the ValidationGroup. I knew that this property is not rendered along-side the control markup because I already tried that and also checked that in the html source. After digging around I found this post -Use JavaScript to get a control's ValidationGroup and learned that those properties are called 'expando properties'. Then I knew what to look for next. There I get something that was of my interest: is-there-a-cross-browser-way-to-use-a-jquery-selector-on-an-expando-property.

There was a partial answer to my requirement and below is the modified onSelectHandler event:

//Initialize the datepicker with onSelect event

$("[id$='_txtDate']").datepicker({ 
 onSelect: onSelectHandler
 });

//onSelectHandler that works 

function onSelectHandler() {
    //get all the spans i.e. the validators and filter them by controltovalidate
    var spans = $('span').filter(function () { return this.controltovalidate == id; });
    if (spans.length > 0){
        var validationgroup = spans[0].validationGroup;
        if (typeof (Page_ClientValidate) == 'function') 
            Page_ClientValidate(validationgroup); 
    }
}

Explanation 2:
The key points from the second link were: (a) Asp.net Validators are rendered as 'span' tags and (b) You can access the controltovalidate property of the validator using the instance of that span. The (b) was the click that I can then get the validationGroup the same way, which I can then pass to Page_ClientValidate function. So that is the code.

Conclusion:

Basically we are just forcing validation on our textbox upon date selection in the datepicker. Simply calling Page_ClientValidate() was not my choice because my textbox was inside a databound control. I spent time to see if I can get hold of ValidationGroup but finally ended up with this which is more relevant in my case.

Sorry this is a quick post. I might come back and modify it but for now just want to put the code up there. Thanks and let me know if you have any questions or any other comments.

Update-1: I found this solution has an issue. Upon date select it does clear out 'All' the validation error messages for other controls as well and not just for the single input textbox. I will post back if I find an alternative.

Update-2: Added another code snippet that seems to be working.

Refrences:

2 Comments