JQuery UI datepicker (validation issue)

I am using jQuery UI datepicker, I added date validation in my datepicker input field, this is my javascript code for datepicker ('start_date' is the id of my datepicker input field):

    $('#my-form').validate({
                rules: {
                    start_date: {
                        required: true

                    }

                },
                messag开发者_C百科es: {
                    start_date: 'Please enter a valid date (yyyy-mm-dd)'

                }
            }); 

$("#start_date").datepicker({
            beforeShowDay: noTheseDays,
            onSelect: function(dateText, inst) {alert(dateText)}});

my datepicker input field in html:

<form id="my-form" method="post">
   ...
    <input class="start_date_field" id="start_date" size="30" type="text" />
   <input id="mysubmit" type="submit" value="Get it" /> 
</form>

The problem is, if I add the validation code in javascript, the datepicker calendar is not showing when mouse click in the datepicker (start_date) input field. If I remove the validation, the calendar shows. Why??

The other problem is the validation error message does not show, if the datepicker input field is empty and I submit the form, an error page is showing instead.....

You're missing input name attribute. validate works with input names, not ids. http://jsfiddle.net/marcosfromero/FBBxW/