jQuery工具提示以显示验证器消息 [英] jquery tooltip to display validator messages

问题描述

我试图在验证失败时在组件上方显示jquery验证程序插件(低音强度一个)的错误消息作为工具提示.工具提示(还有低音效果)不会显示，所以我想知道如何使这些东西起作用.到目前为止，我的代码:

Im trying to display error messages for the jquery validator plugin(the bassistance one) as a tooltip above the component when the validation fails. The tooltip(also the bassistance one) just wont show, so I was wondering how to get this stuff working. My code so far:

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

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

Also, I was wondering how I can get hold of the actual localised error message to display. I do not want to hardcode it into the tooltip as I've done in the snippet above.

非常感谢您的帮助！ ;)

Any help is much appreciated! ;)

推荐答案

执行此操作的一种方法(不带工具提示插件)是一些css代码和一些想象力:

One way for doing this (without tooltip plugin) is with some off css code and some of imagination:

$("#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而不是错误的标签:

Instead of only a label for errors i create this html for errors:

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

使用CSS代码，我们将向用户隐藏该标签.但是errorImage总是可见的(当然，在创建元素时).而且，当用户将鼠标悬停在其上时，标签将显示:

With css code we are going to hide this labels to the user. But the errorImage is always visible (when the element is created, of course). And, when the user hover over it, the label will show:

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.

And for making the tooltips visible out of the bounds of its parents you must change the parent's overflow property to visible. If you are using jQueryUI see the css for making those changes.

overflow: visible;

这是它的外观:

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

Created JSFiddle for demonstration, updated onfocusout method

https://jsfiddle.net/2vc5vmr0/

这篇关于jQuery工具提示以显示验证器消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！