Integrate jquery.validate with bootstrap popover

Question

I've a registration form validated with jquery.validate plugin.

Now, if the form its not valid, i want to put the result of validate in a bootstrap popover, but really, i don't have idea how i can do this.

Some help?

Search SO for code examples using the `errorPlacement` callback. Make an attempt to solve this yourself, then show your attempt when asking for help. — Sparky, Nov 14 '13 at 14:07

score 0 · Answer 1 · answered Nov 14 '13 at 11:42

0

The jQuery.validate plugin has a method called errorPlacement.

This takes 2 arguments:

error: the error message created by the validator on that element.
element: the element being validated.

The Validator sends the error/valid message here and you can handle all the placement logic in there. What I tend to do is put all that in .setDefaults before initialising the validator.

Example:

jQuery.validator.setDefaults({
   ignore: "",
   errorPlacement: function (error, element){
       // Insert error messgae placement logic here
   }
});

answered Nov 14 '13 at 11:42

Adam Botley

672
7
14

Unless you are using `unobtrusive.validate` or have multiple forms, I don't see the advantage of using `setDefaults()`. Why not show the OP a plain vanilla initialization using `.validate()`? – Sparky Nov 14 '13 at 16:00
`setDefaults()` reduces repetition of code. Having one location with the default settings allows multiple instances of `validate()` to be created without the need to define `errorPlacement` each time. – Adam Botley Nov 14 '13 at 16:11
That's why I said, _"Unless you ... have multiple forms,..."_. However, typically, I don't believe this to be the case, and you should have shown a plain example to reduce confusion. Also, including the `ignore` option without relevant context is not helpful. In this case, `ignore` has nothing to do with anything the OP has asked. – Sparky Nov 14 '13 at 16:26
1. OP may not be aware of the `setDefaults()` option, so explaining it will increase his knowledge of the plugin. 2. The example was mainly to give an overview of what properties can be included within `setDefaults()`. If the OP was confused I'm sure he can comment so I can clear anything up for him. – Adam Botley Nov 14 '13 at 18:06
No reason to get defensive... FWIW, my comments were only meant as helpful suggestions for turning a plain answer into something worthy of many up-votes. – Sparky Nov 14 '13 at 18:28

score 0 · Answer 2 · edited May 23 '17 at 12:21

For showing and hiding tooltips for your errors, you'd need to use the errorPlacement and success callback functions.

Since you've shown no code of your own, here is a similar setup using the Tooltipster plugin, just to give you an idea about how to use these callback functions. Adjust as needed for Bootstrap popovers or whatever other tooltip plugin you may use.

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                // construct tooltip with message as per plugin method
                $(element).tooltipster('update', $(error).text());  
                // show tooltip as per plugin method
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                // hide tooltip as per plugin method
                $(element).tooltipster('hide');
            }
    });

});

DEMO: http://jsfiddle.net/kyK4G/

Reference: https://stackoverflow.com/a/14741689/594235

Documentation: http://jqueryvalidation.org/validate