can't get jquery highlight to work on form validation

Question

I am new here and would like a little help if possible. I have a form that I am validating but would like to also highlight the error fields as well as keep the popover. I can't work out what is wrong?

It is on jsfiddle here - http://jsfiddle.net/mKF5L/75/

$('form').validate({
    rules: {
        name: {
            required: true
        },
        email: {
            required: true,
            email: true
        },
        subject: {
            required: true,
            minlength: 10

        },
        comment: {
            required: true,
            minlength: 10,
            maxlength: 200
        }

    },

    highlight: function (element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function (element) {
        $(element).closest('.form-group').removeClass('has-error');
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('bs.popover').options.content = value.message;

            $(value.element).popover('show');

        });
    }
});

Can anyone tell me what I am doing wrong please?

Thanks in advance

Gary.

Firstly, you're including jQuery twice and jQuery Validate plugin twice in your jsFiddle. You don't need both the `minified` and `unminified` versions. — Sparky, Nov 13 '13 at 17:16
Secondly, `showErrors` is not for placing individual errors within popovers, it's for an error summary control. If you want to place individual errors, use the `errorPlacement` callback. — Sparky, Nov 13 '13 at 17:20
See [this answer](http://stackoverflow.com/a/14741689/594235) and [this jsFiddle](http://jsfiddle.net/kyK4G/) for a working example using the Tooltipster plugin. Even though you're using a different tooltip mechanism, the concept is the same. — Sparky, Nov 13 '13 at 17:24
@Sparky, Thank you very much. After looking at and using the example you provided I now at least have a form that validates and highlights as I want. Thank you very much for the pointers. I have also updated the jsFiddle, http://jsfiddle.net/mKF5L/111/ , to reflect my new form setup. Thanks again for your help. — Peggaweng, Nov 14 '13 at 16:33

score 0 · Accepted Answer · edited May 23 '17 at 11:43

The showErrors callback is not for placing individual errors, it's for creating error summaries.

So you'd need to use the errorPlacement and success callback functions to control your tooltips.

Here is a similar setup using the Tooltipster plugin, just to give you an idea. Adjust as needed...

$(document).ready(function () {

    $('#myform').validate({
            // rules and options here,
            errorPlacement: function (error, element) {
                $(element).tooltipster('update', $(error).text());
                $(element).tooltipster('show');
            },
            success: function (label, element) {
                $(element).tooltipster('hide');
            }
    });

});

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

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

Documentation: http://jqueryvalidation.org/validate

can't get jquery highlight to work on form validation

1 Answers1