Jquery DatePicker和必需的字段验证器

Question

I am using asp.net and I have a gridview and inside gridview I have a footer template. In footer template.

  <FooterTemplate>
                        <asp:ImageButton ID="imgbtnAddxxxx" runat="server" CommandName="Insert" ImageUrl="/Style%20Library/Images/add.png" ToolTip="New Record" ValidationGroup="GridViewFooterRowGroup" />
                        </FooterTemplate>

<asp:TemplateField HeaderText="Needed-By">
                        <EditItemTemplate>
                          <asp:TextBox ID="txtNeededBy" runat="server" Text='<%#Eval("NeedBy") %>' BackColor="LightSkyBlue" ForeColor="Black" ReadOnly="true"/>
                          <asp:RequiredFieldValidator ID="reditNeededBy" runat="server" ControlToValidate="txtNeededBy" Text="*" Display="Dynamic" ValidationGroup="GridViewDataRowGroup" />
                        </EditItemTemplate>

                        <ItemTemplate>
                           <asp:Label ID="lblNeededBy" runat="server" Text='<%#Eval("NeedBy") %>'/>
                        </ItemTemplate>

                        <FooterTemplate>
                        <asp:TextBox ID="txtftrNeededBy" runat="server" onchange="abc();" />
                         <asp:RequiredFieldValidator ID="rfvNeededBy" runat="server" ControlToValidate="txtftrNeededBy" Text="*" Display="Dynamic" ValidationGroup="GridViewFooterRowGroup" />
                        </FooterTemplate>

                     </asp:TemplateField>

I have a jquery code like the following to show calendar pickup.

<script type="text/javascript">
    $(function () {
        BindEvents();
    });

    $(function () {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            BindEvents();
        });
    });

    function BindEvents() {

        var $ = jQuery.noConflict();

        $('input[id*="txtftrNeededBy"]').datepicker({
            dateFormat: 'dd-M-y', changeMonth: true, minDate: 0,
            onSelect: function () { },
            onClose: function (dateText) {
                var txt = $("#<%=hdnNeedByDate.ClientID%>");
                txt.val(dateText);
            }
        });


        $('input[id*="txtNeededBy"]').datepicker({
            dateFormat: 'dd-M-y', changeMonth: true, minDate: 0,
            onSelect: function () { },
            onClose: function (dateText) {
                var txt = $("#<%=hdnNeedByDate.ClientID%>");
                txt.val(dateText);
            }
        });

        $('input[id*="txtftrQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
        $('input[id*="txtQty"]').autoNumeric({ aSep: '', vMax: '999999', vMin: '0', wEmpty: 'zero', mDec: null });
    } 
</script>

When calender returns and user press Add button the validation group shud check if user has selected the date or not..if user enters date inside and click on ADD nothing happens but if i delete requirefieldvalidator it works...

is there any issue with requiredfield validator with jquery datepicker? how to fix this.

Answer 1

I just ran into this problem myself. I found this bug report (link)

Here are two workarounds.

Register an empty handler for the onSelect event of the datepicker

$(".myDatePickerClass").datepicker({onSelect: function() {}})

Or

Add EnableClientScript="false" to your validator

<asp:RequiredFieldValidator runat="server" EnableClientScript="false"...

Answer 2

This worked for me. I hope it helps you too.

        $(function () {

        $("#<%= txtSendDate.ClientID %>").datepicker({
            onSelect: function (dateText, inst) { }
        });


    });