CODEWITHSUNDEEP
jqueryasp.net
Hidalgo
Hidalgo

Reputation: 941

jQuery UI Datepicker on ASP.NET Web Form

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.

Upvotes: 0

Views: 1121

Answers (3)

Hidalgo
Hidalgo

Reputation: 941

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.

Upvotes: 0

Mohamed Abbas
Mohamed Abbas

Reputation: 138

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)', 
}});

Upvotes: 0

mason
mason

Reputation: 32694

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

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

Upvotes: 1

Related Questions