jQuery 带有工具提示的表单验证器

Question

我已经使用了这个 jQuery Form Validator 并且我正在尝试将工具提示实现为错误消息而不是简单的 span 标记消息。

因此，我正在尝试关注此线程 How to display messages from jQuery Validate plugin inside of Tooltipster tooltips? in which they have given a jsfiddle link 以实现我正在尝试关注的目标。

这是我的 jsfiddle 目前为止我尝试过的方法。

I am unable to put the same code in my question here, because question has reached maximum characters limit. Hence I have create jsfiddle for the same.

有人可以指导我为什么它不起作用吗？从现在开始我应该怎么做才能达到同样的效果。

谢谢

Answer 1

好的伙计们，

这是我为实现这一目标所做的工作。

<style>
/* Tooltip container */
.tooltipPopup {
    /*position: relative; */
  /*  display: inline-block;*/
 /*   border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ */
}

/* Tooltip text */
.tooltipPopup .tooltiptextPopup {
    visibility: hidden;
    width: 120px;
    background-color: red;
    color: white;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltipPopup:hover  .tooltiptextPopup{
    visibility: visible;
}



</style>
<form action="" id="myform" >
  <p class="tooltipPopup">
    E-mail
    <input name="email" data-validation="email" >
    <!-- <input name="email" data-validation="email" data-validation-error-msg-container='item-price-error-dialog' >
    <span id="item-price-error-dialog"></span> -->



  </p>

  <p>
    <input value="Validate" type="submit">
    <input value="Reset form" type="reset">
  </p>
</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-form-validator/2.3.26/jquery.form-validator.min.js"></script>

<script>


    // initialize validate plugin on the form
    $.validate({
       // errorElementClass:'tooltip',
        errorMessageClass:'tooltiptextPopup'
    });

</script>

在这里，我将 errorMessageClass 设置为 tooltiptextPopup 和 <p class="tooltipPopup"> 以便它可以掩盖我的工具提示。

希望这对陷入相同情况并希望在不包含任何第三方库的情况下实现相同情况的人有所帮助。

谢谢

jQuery 带有工具提示的表单验证器

jQuery Form Validator with tooltip

javascript

jquery

jquery-form-validator