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

【问题标题】：jQuery Validate - display field errors in tooltip plus "Please fill required fields" messagejQuery Validate - 在工具提示中显示字段错误以及“请填写必填字段”消息
【发布时间】：2014-03-13 10:24:32
【问题描述】：

我的验证器中有自定义的 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 做到这一点？

【问题讨论】：

标签： javascript jquery jquery-validate

【解决方案1】：

抱歉，英语不好，您可以像这样使用引导工具提示 `

   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."
   }`

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

【讨论】：

【解决方案2】：

您正在寻找的选项在documentation 中的errorContainer 下进行了描述：

错误容器 隐藏和显示这个容器证实。示例：为错误消息使用附加容器。作为 errorContainer 给出的元素在以下情况下全部显示和隐藏发生错误。但是，错误标签本身会添加到以 errorLabelContainer 形式给出的元素，此处为无序列表。因此错误标签也被包装到 li 元素中（包装选项）。

代码如下所示：

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

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

【讨论】：