jQuery Form Validator с всплывающей подсказкой - PullRequest
Новая
       19

jQuery Form Validator с всплывающей подсказкой

0 голосов
/ 17 мая 2018

Я использовал этот jQuery Form Validator , и я пытаюсь реализовать всплывающую подсказку в виде сообщения об ошибке вместо простого сообщения span tag.

Следовательно, я пытаюсь следовать этой теме Как отображать сообщения из плагина jQuery Validate во всплывающих подсказках Tooltipster? , в котором они дали ссылку jsfiddle для достижения того же, что я Я пытаюсь следовать.

Вот мой jsfiddle , который я пробовал до сих пор.

Я не могу поставить тот же код в моем вопросе здесь, потому что вопрос достиг максимального ограничения символов. Следовательно, я должен создать jsfiddle для того же самого.

Может кто-нибудь подсказать мне, почему он не работает? Что мне делать дальше, чтобы добиться того же.

Спасибо

1 Ответ

0 голосов
/ 18 мая 2018

Хорошо, ребята,

Вот что я сделал, чтобы добиться этого.

<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">, чтобы он мог скрыть мою подсказку.

Надеюсь, это поможет тому, кто застрял в той же ситуации ижелая реализовать то же самое без включения сторонней библиотеки.

Спасибо

...