Search jQuery

jQuery Forum

Using jQuery Plugins

mailfonrs

jQuery Validate - display one warning for the same types of errors

in Using jQuery Plugins • 8 years ago

Hi,

I have a simple form that has several input elements that are required:

$("input").each(function(index, elem) {
var rules = {
required:true
}
$(elem).rules("add", rules);
});

And I want to place all error messages within div:

<div id="errorContainer" class="inputGreska">
There are some errors. Please correct the following:
<ul id="errorLabelContainer"></ul>
</div>

So, I did the following:

$("#forma").validate({
errorClass: "red",
errorContainer: "#errorContainer",
errorLabelContainer: "#errorLabelContainer",
wrapper: "li",
errorElement: "div"
});

The problem is the following:

If the user forgets to fill more than one input - within error container there will be the same warnings repeated. So, if the user forgets to fill 3 fields, there will be:

This field is required.
This field is required.
This field is required.

Is it possible to show just one error message, like this:

Fields marked by asterisks (*) are required

no matter how many elements the user has forgotten to fill.

Thank you.

Replies(4)

Sµßhrånil∂

Re: jQuery Validate - display one warning for the same types of errors

8 years ago

check showErrors function

mailfonrs

Re: jQuery Validate - display one warning for the same types of errors

8 years ago

check showErrors function

showErrors

Type: Function()
A custom message display handler. Gets the map of errors as the first argument and an array of errors as the second, called in the context of the validator object. The arguments contain only those elements currently validated, which can be a single element when doing validation onblur/keyup. You can trigger (in addition to your own messages) the default behaviour by calling this.defaultShowErrors().
Example: Update the number of invalid elements each time an error is displayed. Delegates to the default implementation for the actual error display.
1

2

3

4

5

6

7

8
$(".selector").validate({
  showErrors: function(errorMap, errorList) {
    $("#summary").html("Your form contains "
      + this.numberOfInvalids()
      + " errors, see details below.");
    this.defaultShowErrors();
  }
});
The callback gets passed two arguments:
errorMap

Type: Object

Key/value pairs, where the key refers to the name of an input field, values the message to be displayed for that input.

errorList

Type: Array

An array for all currently validated elements. Contains objects with the following two properties:

message

Type: String

The message to be displayed for an input.

element

Type: Element

The DOMElement for this entry.

So, I guess that I need to remove objects that have same message property from array errorList ? But, I'm not sure how to do it... I started like this:

showErrors: function(errorMap, errorList) {
    $.each(errorList, function(index, value) {
        var message = value.message;
        var position = index;
        $.each(errorList, function(index, value) {
            if (value.message = message) {
                if (index != position) {
                  errorList.splice(index, 1)
            }
        })
    })
}