Question

在我看来，jquery-validation showErrors阻止了高亮和不高亮的动作。

在html中，我有一个必需的表单组：

        <form id="ValidationForm" method="post" class="form-horizontal" role="form" novalidate="novalidate">
                        <div class="form-group required">
                            <label class="col-xs-3 control-label" for="Letters">Letters</label>
                            <div class="col-xs-9 controls">
                                <input class="form-control input-md" id="Letters" name="Letters" type="text" placeholder="Letters" />
                            </div>
                        </div>
                       <div class="col-xs-4">
                            <input id="btnSave" class="btn btn-default" type="submit" value="Save Changes" name="btnSave">
                        </div></form>

在javascript中，我有定义验证器的规则：

var rules = {
    rules: {
        "Letters": { required: true }
    },
    submitHandler: function (form) {
        $('#btnSave').prop("disabled", true);
        form.submit();
    },
    highlight: function (element, errorClass) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element, errorClass) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    showErrors: function(errorMap, errorList) {
        $.each(this.successList, function(index, value) {
            return $(value).popover("hide");
        });
        return $.each(errorList, function(index, value) {
            var _popover;
            _popover = $(value.element).popover({
                trigger: "manual",
                placement: "auto",
                content: value.message,
                template: "<div class=\"popover\"><div class=\"arrow\"></div><div class=\"popover-inner\"><div class=\"popover-content\"><p></p></div></div></div>"
            });
            _popover.data("bs.popover").options.content = value.message;
            return $(value.element).popover("show");
        });
    }
};
$("#ValidationForm").validate(rules);

如果我删除showErrors并按下提交按钮，则表单组会显示＆＃34; has-errors＆＃34;添加了类，输入边框显示为红色。添加showErrors时，此突出显示功能将消失。有什么想法吗？

Answer 1

在我看来，jquery-validation showErrors阻止了高亮和不高亮的动作。

我不完全确定你想要实现的最终效果，因为你从未解释过它。但是，highlight和unhighlight选项仅用于控制消息应出现在输入旁边时发生的情况。而showErrors option用于创建页面上某个位置的所有错误的集中定位摘要。我不知道你是怎么或为什么要把两者结合在一起使用，我不完全确定一个选项如何“阻止”另一个选项。

查看showErrors函数中的代码后，您似乎正在尝试为每条消息创建一个弹出效果。在这种情况下，showErrors不是用于此目的的正确选择。

您希望将errorPlacement和success选项用于工具提示或弹出式窗口。当每个错误发生时，这些选项一次对每个输入进行操作，而只要表单上的任何地方出现错误，showErrors就会触发。

errorPlacement: function (error, element) {
    // put text of error into tooltip with $(error).text()
    // show tooltip
},
success: function (label, element) {
    // hide the tooltip
},

请参阅下面的答案，该答案将更详细地讨论：

https://stackoverflow.com/a/28241902/594235

jQuery验证showErrors阻止高亮/不高亮

1 个答案: