Validate an inline jquery Datepicker using jquery validation

Question

I am trying to ensure that a date has been selected using my inline datepicker.The inline datepicker feeds a hidden input box, so it's tough to require that. To try to get the message to display, I have relocated my error messages using invalidHandler.

My code:

<script type="text/javascript">
      jQuery('#date').datepicker({
        inline: true,   
        beforeShowDay: checkDayOfWeek,
        onSelect: function(dateText, inst) { $("#ship_date").val(dateText); }
      });
</script>

<div id="date" style="font-size: 75%;" class="required"></div>
<input type="hidden" name="ship_date" id="ship_date" class="required" />

Me relocating the error message:

jQuery("#custform").validate({
invalidHandler: function(e, validator) {
    var errors = validator.numberOfInvalids();
    if (errors) {
        var message = errors == 1
            ? 'You missed 1 field. It has been highlighted below'
            : 'You missed ' + errors + ' fields.  They have been highlighted     below';
        $("div.error span").html(message);
        $("div.error").show();
    } else {
        $("div.error").hide();
    }           
},
});

My Goal: When someone submits a form without picking a date, they are presented with a message to enter a date before the form will submit. If we can add a class to the date picker's div, all the better.

Thanks for reading

Answer 1

Are you using jQuery validator plugin? If so you can add a class to the hidden field

<input type="hidden" class="required" id="field1" name="field1"/>

and set the validator option ignore to null, ignore nothing...

$.validator.setDefaults({ ignore: '' });

(reference) and you'll get an error msg where the hidden field is. If it's near the date field it will look like the date field has the msg. I've done this in my forms before.

Hope this helps.