jQuery Validate - display field errors in tooltip plus "Please fill required fields" message

Question

I have custom ErrorPlacement function in my validator, which displays error in tooltip:

errorPlacement: function (error, element) {
    var lastError = $(element).data('lastError'),
        newError = $(error).text();
    $(element).data('lastError', newError);
    if (newError !== '' && newError !== lastError) {
        $(element).tooltipster('content', newError);
        $(element).tooltipster('show');
    }
},

This works fine, but I would also need to display "Please, fill in all required fields" message on top of the form.

How can I do that with jQuery Validate?

Usama Fayyaz · Accepted Answer · 2020-07-29 19:58:42Z

1

Sorry for bad english, You can use bootstrap tooltip for this like that `

   rules: {
        first_name:"required",
    },

    highlight: function (element) {
        $(element).addClass('is-invalid');
    },
    unhighlight: function (element) {
        $(element).removeClass('is-invalid');
        $(element).attr('data-original-title','');
    },
    errorPlacement: function (error, element) {
        element.attr("data-toggle", "tooltip");
        element.attr("data-original-title", error[0].innerHTML);
        error.css({
            'color': '#FF0000',
        });
        $('.is-invalid').tooltip();
        return false;
    },
    messages:{
      first_name:"Please provide first Name."
   }`

In error placement you define and initialize tooltip then in unhighlight you reset tooltip title.

answered Jul 29, 2020 at 19:58

Usama Fayyaz

1052 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ryley · Accepted Answer · 2014-03-13 16:03:35Z

0

The option you are looking for is described in the documentation, under errorContainer:

errorContainer Hide and show this container when validating. Example: Uses an additonal container for error messages. The elements given as the errorContainer are all shown and hidden when errors occur. However, the error labels themselves are added to the element(s) given as errorLabelContainer, here an unordered list. Therefore the error labels are also wrapped into li elements (wrapper option).

Code would look like this:

$('form').validate({
    errorContainer:'#myErrorDiv'
});

Working example: http://jsfiddle.net/ryleyb/3cDY4/

answered Mar 13, 2014 at 16:03

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

Collectives™ on Stack Overflow

jQuery Validate - display field errors in tooltip plus "Please fill required fields" message

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related