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>内，并在<button>内的<input>下添加<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没有经验，但可能是在下面的例子中弄乱我的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

鉴于你的呈现的 HTML由DOM构建......

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

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

DEMO：http://jsfiddle.net/2g953/1/

Zebra Datepicker未显示验证错误消息

1 个答案: