jQuery UI Datepicker on ASP.NET Web Form

Question

How do you implement the jQuery UI Datepicker validation when working in ASP.NET web form? The base for this validation is from this site: http://keith-wood.name/uiDatepickerValidation.html The problem I have is with the rule. Example:

$('#validateForm').validate({ 
errorPlacement: $.datepicker.errorPlacement, 
rules: { 
    txtDatepicker: { 
        required: true, 
        dpDate: true 
    }, 
}, 
messages: { 
    txtDatepicker: 'Please enter a valid date (yyyy-mm-dd)', 
}});

The "txtDatepicker" is the ASP:TextBox ID which changes when the page is rendered. How do I specify this in the above rule syntax? I tried to use property name="txtDatepicker" but it didn't work.

mason · Accepted Answer · 2014-04-21 14:12:00Z

1

<asp:TextBox runat="server" Id="txtDatepicker" ClientIDMode="Static" />

Just change the ClientID Mode, then the ID on the client will always be txtDatepicker.

answered Apr 21, 2014 at 14:12

mason

32.8k12 gold badges83 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hidalgo Over a year ago

Mason, when I added the ClientIDMode="Static" now I am getting error "unable to get property 'settings' of the undefined or null reference. Thank you for the suggestion.

mason Over a year ago

Check your JavaScript from the client side and make sure it matches what you're expecting.

Mohamed Abbas · Accepted Answer · 2014-04-21 14:32:25Z

0

Could do it like

$('#validateForm').validate({ 
errorPlacement: $.datepicker.errorPlacement, 
rules: { 
    <%=txtDatepicker.ClientID %>: { 
        required: true, 
        dpDate: true 
    }, 
}, 
messages: { 
    <%=txtDatepicker.ClientID %>: 'Please enter a valid date (yyyy-mm-dd)', 
}});

answered Apr 21, 2014 at 14:32

Mohamed Abbas

1381 silver badge11 bronze badges

1 Comment

Hidalgo Over a year ago

Mohamed, Your syntax does not work either. Visual studio shows squiggly red line under the colon which is right after the <%=txtDatePicker.ClientID %> What I tried also is to enclose the <% %> into double quotes. This removed the squiggly line but makes no difference in how it works.

Hidalgo · Accepted Answer · 2014-04-21 21:48:10Z

Here is what I found that works (but for the life of me I don't understand why and how).

I have changed the rule as following:

$('#validateForm').validate({ 
 errorPlacement: $.datepicker.errorPlacement, 
rules: { 
  anystringorname: { 
  }, 
 }, 
 messages: { 
 }});

And then I add the class dpDate to my asp:textbox and everything works. That is, if I type in some bogus number (e.g. 12344) and click on Submit the focus is set to the asp:textbox and datepicker calendar appears. And if I type the valid date, the Submit works. So everything works but note that the code above has a bogus name in the rules and no actual rules. Yet if I comment the validate() all together, no validation takes place. And when typing a bogus number the Submit does not stop. If anybody see what I don't see, please let me know.

Collectives™ on Stack Overflow

jQuery UI Datepicker on ASP.NET Web Form

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related