Reputation: 3558

jquery tooltip to display validator messages

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! ;)

Upvotes: 9

Answers (4)

mpccolorado

Reputation: 827

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");
    }
});

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>

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

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;

And this is how it looks:

validation

Edit: Created JSFiddle for demonstration, updated onfocusout method

https://jsfiddle.net/2vc5vmr0/

Upvotes: 17

John Reilly

Reputation: 6309

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:

$("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.

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

Upvotes: 1