用于显示验证器消息的 jquery 工具提示

Question

当验证失败时，我尝试将 jquery 验证器插件(bassistance 插件)的错误消息显示为组件上方的工具提示。工具提示(也是低音提示)不会显示，所以我想知道如何让这个东西工作。到目前为止我的代码:

$("#loginForm").validate({       
    errorPlacement: function(error, element) {
        $(element).tooltip({
            content: 'the error message goes here'
        });
    }
});

此外，我想知道如何获取要显示的实际本地化错误消息。我不想像我在上面的代码片段中所做的那样将其硬编码到工具提示中。

非常感谢任何帮助! ;)

Answer 1

实现此目的的一种方法(没有工具提示插件)是使用一些关闭的 css 代码和一些想象力:

$("#frmArticle").validate({
    submitHandler: function(form) {
        form.submit();
    },
    onfocusout: function(element) {
        //To remove the 'checked' class on the error wrapper
        var $errorContainer = $(element).siblings(".Ntooltip").find("label");
        $errorContainer.removeClass("checked");
        if ( !this.checkable(element)) {
            this.element(element);
        }
    },
    rules: {
        name: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        var container = $('<div />');
        container.addClass('Ntooltip');  // add a class to the wrapper
        error.insertAfter(element);
        error.wrap(container);
        $("<div class='errorImage'></div>").insertAfter(error);
    },
    success: function(element) {
        $(element).addClass("checked");
    }
});

我不只是为错误创建一个标签，而是为错误创建这个 html:

<div class="Ntooltip">
   <label for="nombre" generated="true" class="error">Requerido</label>
   <div class="errorImage"></div>
</div>

通过 CSS 代码，我们将向用户隐藏此标签。但 errorImage 始终可见(当然，当创建元素时)。并且，当用户将鼠标悬停在其上时，标签将显示:

div.Ntooltip {
position: relative !important; /* es la posición normal */
display: inline-block;
top: -0.2em;
left: 0.2em;
}

div.Ntooltip:hover {
    z-index:1005; /* va a estar por encima de todo */
}

div.Ntooltip label {
    display: none !important; /* el elemento va a estar oculto */
    vertical-align: middle;
}

div.Ntooltip:hover label.error:not(.checked) {
    display: inline-block !important; /* se fuerza a mostrar el bloque */
    position: absolute; /* se fuerza a que se ubique en un lugar de la pantalla */ 
    left:2em; /* donde va a estar */
    width:auto; /* el ancho por defecto que va a tener */
    padding:5px; /* la separación entre el contenido y los bordes */
    background-color: #ff6611; /* el color de fondo por defecto */
    border: 3px coral solid;
    border-radius: 0.5em;
    color: white;
    opacity: 0.85;
}

label.error + div.errorImage {
    background:url("../img/error.png") no-repeat 0px 0px;
    display:inline-block !important;
    width:22px;
    height:22px;
    vertical-align: middle;
}

label.checked + div.errorImage {
    background:url("../img/valid.png") no-repeat 0px 0px;
    display:inline-block !important;
    width:22px;
    height:22px;
    vertical-align: middle;
}

为了使工具提示在其父级的范围之外可见，您必须将父级的溢出属性更改为可见。如果您使用的是 jQueryUI，请参阅用于进行这些更改的 css。

overflow: visible;

这就是它的样子:

编辑:创建 JSFiddle 进行演示，更新了 onfocusout 方法

https://jsfiddle.net/2vc5vmr0/