Custom validation handling with jQuery Datepicker

We have an instance of the jQuery UI DatePicker. When the built in validation fires--such as for an invalid date as shown below--the plug in inserts the message between the input and the calendar button.

<div><label for="optContractFinite">Contract Starts on</label></div>
<input type="radio" id="optContractFinite" value="OE" name="optContractDuration" />
<input type="text" class="isdatepicker" id="diContractStart" />

<div">Contract Expires on</div>
<input type="text" class="isdatepicker" style="margin-left: 20px" id="diContractExpires" />

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $(".isdatepicker").datepicker({
            showOn: "button",
            buttonImage: rootPath + "/images/CalendarIcon.gif",
            buttonImageOnly: true
        });
    });
</script>开发者_运维问答

Is there a way to call a custom function to handle displaying the message?

So what was causing that was not the datepicker rather the jQuery validator and it's default placement handler.

form_validator = $('form').validate({
    errorClass: 'validationError',
    ignore: '.optional',
    onkeyup: false,
    rules: {
        diContractStart: {
            required: '#optContractOpenEnded:unchecked',
            date: true
        },
        diContractExpires: {
            required: '#optContractOpenEnded:unchecked',
            date: true
        }
    },
    errorPlacement: function (er, el) {
        if (el && el.length > 0) {
            // er.insertAfter(el); <- The culprit
            createErrorBubble(el, er.text());
        }
    }
});