使用jQuery Datepicker进行自定义验证处理

时间:2011-08-11 22:19:23

标签: jquery-ui jquery-ui-datepicker

我们有一个jQuery UI DatePicker的实例。当内置验证触发时 - 例如下面显示的无效日期 - 插件会在输入和日历按钮之间插入消息。

Error message renders to the right the text box.

<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>

有没有办法调用自定义函数来处理显示消息?

1 个答案:

答案 0 :(得分:0)

所以导致这不是datepicker而不是jQuery验证器,它是默认的放置处理程序。

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