jQuery验证-在工具提示中显示字段错误以及“请填写必填字段”消息

Question

我在我的验证器中有自定义的ErrorPlacement函数，它在工具提示中显示错误：

errorPlacement: function (error, element) {
    var lastError = $(element).data('lastError'),
        newError = $(error).text();
    $(element).data('lastError', newError);
    if (newError !== '' && newError !== lastError) {
        $(element).tooltipster('content', newError);
        $(element).tooltipster('show');
    }
},

这可以很好地工作，但我还需要在表单顶部显示“请填写所有必填字段”消息。

我如何使用jQuery Validate来做到这一点？

Answer 1

很抱歉我的英文不好，你可以使用bootstrap工具提示，就像这样`

   rules: {
        first_name:"required",
    },

    highlight: function (element) {
        $(element).addClass('is-invalid');
    },
    unhighlight: function (element) {
        $(element).removeClass('is-invalid');
        $(element).attr('data-original-title','');
    },
    errorPlacement: function (error, element) {
        element.attr("data-toggle", "tooltip");
        element.attr("data-original-title", error[0].innerHTML);
        error.css({
            'color': '#FF0000',
        });
        $('.is-invalid').tooltip();
        return false;
    },
    messages:{
      first_name:"Please provide first Name."
   }`

在错误放置中定义并初始化工具提示，然后在取消高亮显示中重置工具提示标题。

Answer 2

您要查找的选项在errorContainer下的documentation中进行了描述

errorContainer验证时隐藏和显示此容器。示例:对错误消息使用附加容器。当出现错误时，作为errorContainer给出的元素都会显示和隐藏。但是，错误标签本身被添加到以errorLabelContainer形式给出的元素中，这里是一个无序列表。因此，错误标签也被包装到li元素中(包装器选项)。

代码将如下所示：

$('form').validate({
    errorContainer:'#myErrorDiv'
});

工作示例：http://jsfiddle.net/ryleyb/3cDY4/