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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4381476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 17:10:48  来源:igfitidea点击:

jquery tooltip to display validator messages

jqueryvalidation

提问by Runar Halse

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:

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

$("#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! ;)

任何帮助深表感谢!;)

回答by mpccolorado

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

这样做的一种方法(没有工具提示插件)是使用一些关闭的 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");
    }
});

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

我不仅为错误创建了一个标签,还为错误创建了这个 html:

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

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:

使用 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;
}

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.

为了使工具提示在其父级边界之外可见,您必须将父级的溢出属性更改为可见。如果您使用 jQueryUI,请查看用于进行这些更改的 css。

overflow: visible;

And this is how it looks:

这是它的外观:

validation

验证

Edit: Created JSFiddle for demonstration, updated onfocusoutmethod

编辑:为演示创建了 JSFiddle,更新了onfocusout方法

https://jsfiddle.net/2vc5vmr0/

https://jsfiddle.net/2vc5vmr0/

回答by Michael W.

Just so others can find this solution:

只是为了让其他人可以找到这个解决方案:

I wanted to achieve the same relying on a more robust plugin and I found qtip2. It integrates nicely with jQuery Validate, as you can see here

我想依靠更强大的插件来实现同样的目标,我找到了qtip2。它与 jQuery Validate 很好地集成,正如你在这里看到的

回答by John Reilly

I've been able to do this using Bootstrap's tooltip mechanism. With the Bootstrap JS / CSS loaded then you can initialise the validation and pass the showErrors function like this:

我已经能够使用 Bootstrap 的工具提示机制来做到这一点。加载 Bootstrap JS/CSS 后,您可以初始化验证并传递 showErrors 函数,如下所示:

$("form").validate({

  showErrors: function(errorMap, errorList) {

      // Clean up any tooltips for valid elements
      $.each(this.validElements(), function (index, element) {
          var $element = $(element);

          $element.data("title", "") // Clear the title - there is no error associated anymore
              .removeClass("error")
              .tooltip("destroy");
      });

      // Create new tooltips for invalid elements
      $.each(errorList, function (index, error) {
          var $element = $(error.element);

          $element.tooltip("destroy") // Destroy any pre-existing tooltip so we can repopulate with new tooltip content
              .data("title", error.message)
              .addClass("error")
              .tooltip(); // Create a new tooltip based on the error messsage we just set in the title
      });
  },

  submitHandler: function(form) {
      alert("This is a valid form!");
  }

});

});

And that's it working. I've also done this in other circumstances using jQuery UI tooltip using the same mechanism and just swapping out the Bootstrap stuff for this.

这就是它的工作原理。我也在其他情况下使用 jQuery UI 工具提示使用相同的机制完成了此操作,并为此交换了 Bootstrap 的内容。

You can see a demo on my blog here: http://blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html

你可以在我的博客上看到一个演示:http: //blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html

回答by Gaspar Don Perignon

The only way I have found is this...

我找到的唯一方法是这个......