斑马Datepicker不显示验证错误消息

Question

我正在其中一种表单中使用Zebra Datepicker，并尝试使用jzaefferer validate插件对其进行验证。 我希望输入字段显示红色边框，并且希望在输入字段下方显示错误消息。 红色边框有效，但未显示错误消息。 如何显示错误消息？

这是我的代码（错误消息应放入.diverror中）：

<div class="input-datepicker">
    <label>Van:</label>
    <input type="text" name="Datum1" class="datepicker" />
</div>
<div class="diverror"></div>

Zebra Datepicker将<input>放在<span>并在<span>内的<span> <input>下添加<button> <span> 。

<div class="input-datepicker">
   <label>Van:</label>
   <span class="Zebra_DatePicker_Icon_Wrapper" style="display: block; position:  relative; float: none; top: auto; right: auto; bottom: auto; left: auto;">
   <input class="datepicker error" type="text" name="Datum1" readonly="readonly" style="position: relative; top: auto; right: auto; bottom: auto; left: auto;">
   <button class="Zebra_DatePicker_Icon Zebra_DatePicker_Icon_Inside" type="button" style="top: 23px; left: 233px;">Pick a date</button>
   </span>
</div>
<div class="diverror"></div>

我对jquery并没有那么丰富的经验，但是在下面的示例中，可能是因为span弄乱了我的appendTo。

这是我的validation.js：

$("#home-verhuur").validate({
    errorPlacement: function(error, element) {
        error.appendTo( element.parent("div").next("div") );
    },
    ignore: "input[type='text']:hidden",
    onsubmit: true,
    onkeyup: true,
    onclick: true,
    rules: {

        Naam: {
            required: true,
            minlength: 2
        },
        Email: {
            required: true,
            email: true
        },
        Product: {
            required: true
        },
        Personen: {
            required: true,
            min: 1
        },
        Datum1: {
            required: true,
        },
        Datum2: {
            required: true,
        },

        },
    messages: {
        Naam: "Vul je voornaam in (minimaal 2 karakters)",
        Email: "Vul een correct Email adres in",
        Product: "Kies een product",
        Personen: "Vul het aantal personen in",
        Datum1: "Kies een begindatum",
        Datum2: "Kies een einddatum",
    }
});

欢迎所有帮助！

Answer 1

给定您呈现的DOM构造的HTML ...

您必须将.parent()更改为.parents() ，因为目标div现在更高了。

errorPlacement: function (error, element) {
    error.appendTo(element.parents("div").next("div"));
},

演示： http : //jsfiddle.net/2g953/1/