CODEWITHSUNDEEP
javascriptjqueryjquery-validate
user1049961
user1049961

Reputation: 2736

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

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?

Upvotes: 0

Views: 1513

Answers (2)

Usama Fayyaz
Usama Fayyaz

Reputation: 105

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.

Upvotes: 1

Ryley
Ryley

Reputation: 21226

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/

Upvotes: 0

Related Questions