Question

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?

Answer 1

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());
        }
    }
});