Question

我正在尝试使用jQuery Validation插件并在显示消息时遇到问题。

该字段本身变为红色但信息无处可见。

我的HTML代码：

<div class="dispTbl form-group">
        <div class="dispCell">
            <label>Send discount message within</label>
            <div class="error" id="offerError"></div>
        </div>
        <div class="dispCell" style="vertical-align:middle;line-height:20px">
            <div class="InputAddOn">
                <button class="InputAddOn-item" data-action="decrease" data-field="offerDays"><i class="fa fa-arrow-circle-down"></i></button>
                <input type="text" name="settings__discount_message_offer_days" id="offerDays" class="days" style="width: 46px" value="<?= $settings__discount_message_offer_days; ?>">
                <button class="InputAddOn-item" data-action="increase" data-field="offerDays"><i class="fa fa-arrow-circle-up"></i></button>
            </div>
        </div>

我的jQuery代码：

var validator = $("#settingsForm").bind("invalid-form.validate", function() {
    $("#errors").html("Your form contains " + validator.numberOfInvalids() + " errors, see details below.");
    }).validate({
            debug: true,
            errorElement: "div",
            errorContainer: $("#warning, #summary"),
            errorPlacement: function(error, element) {
                if(element.attr("class") == "days")
                    error.appendTo($('#offerError'));
            },
            success: function(label) {
                    label.text("ok!").addClass("success");
            },
            rules: {
                settings__discount_message_offer_days: {
                    smaller: $('#discApplicableDays').val(),
                    number: true
                }
            },
            messages: {
                settings__discount_message_offer_days: {
                    number: 'Please enter a numeric value'
                }
            }
    });

较小的方法：

    $.validator.addMethod('smaller',function(value, element, param) {
    return value <= param;
}, 'These number of days cannot be bigger than the Discount applicable if paid within number of days');

方法得到的值是：价值：1 param：0

为什么错误的div保持为空？

Answer 1

你没有正确地使用各种选项而没有告诉我们这应该是什么行为。您还忽略了包含足够的代码来重现该问题。没有<form>，submit按钮，没有#errors和#discApplicableDays个元素。

此外，这些也是问题。

您已将the errorContainer option设置为$("#warning, #summary")，并且代码中没有此类容器。此外，此选项还需要设置errorLabelContainer。
您将errorElement设置为div，这很好。但是，在errorPlacement范围内，您正在尝试检查某个元素并强制将该错误消息附加到您手动创建的另一个div。这是不必要的。如果您允许插件默认运行，您可以使用简单的jQuery DOM操作将div置于任何位置，而无需手动创建或动态附加任何内容。
在errorPlacement中，您有if (element.attr("class") == "days")。但是，当出现错误时，插件会动态应用错误类，因此您的条件总是会失败，因为"days error"不匹配"days"。使用返回布尔值的jQuery .hasClass()来检查days类。但是，正如上面＃2中所述，我认为应该放弃这种方法以获得更通用的东西。

Answer 2

使用showErrors选项来完成此任务：

showErrors: function(errorMap, errorList) {
$(".errormsg").html($.map(errorList, function (el) {
    return el.message;
}).join(", "));
},

示例：http://jsfiddle.net/bd3zM/

jQuery验证 - 错误不显示

2 个答案: