Подсказка jquery для отображения сообщений валидатора

Question

Я пытаюсь отобразить сообщения об ошибках для плагина валидатора jquery (bassistance) в виде всплывающей подсказки над компонентом, когда проверка не удалась.Всплывающая подсказка (также bassistance) просто не показывается, поэтому мне было интересно, как заставить этот материал работать.Мой код до сих пор:

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

Кроме того, мне было интересно, как я могу получить фактическое локализованное сообщение об ошибке для отображения.Я не хочу жестко закодировать его во всплывающую подсказку, как я делал во фрагменте выше.

Любая помощь очень ценится!;)

Answer 1

Один из способов сделать это (без плагина всплывающей подсказки) - использовать код off 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/

Answer 2

Чтобы другие могли найти это решение:

Я хотел добиться того же, опираясь на более надежный плагин, и нашел qtip2 .Он прекрасно интегрируется с jQuery Validate, как вы можете видеть здесь

Answer 3

Я смог сделать это, используя механизм всплывающей подсказки 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!");
  }

});

И все работает.Я также делал это в других обстоятельствах, используя всплывающую подсказку jQuery UI, используя тот же механизм, и просто поменял для этого материал Bootstrap.

Вы можете увидеть демо на моем блоге здесь: http://blog.icanmakethiswork.io/2013/08/using-bootstrap-tooltips-to-display.html

Answer 4

Единственный способ, которым я нашел , это ...