jQuery validation plugin - one error message for all required fields

Question

How i can show only one message for all required fields?

For example - i have 3 fields, all of them are required. jquery.validate shows error for every field, but i want to show only one message, like "all marked fields are required".

I can't use summary values (like numberOfInvalids or so), because in the same time i need to show typo errors (wrong email, short password, etc).

Code example (left form is to validate, right one is to show how it should looks like): screenshot of codepen.io

https://codepen.io/mike-polo/pen/WyZRBd

HTML:

<form class="form-validate">
    <div class="form-errors">
        <h3>Errors:</h3>
        <ul></ul>
    </div>
    <h3>All fields required:</h3>
    <div class="form-field">
        <input type="text" name="q" id="f-q" placeholder="Required text field" required>
    </div>
    <div class="form-field">
        <input type="email" name="w" id="f-w" placeholder="Required email field"  required>
    </div>
    <div class="form-field">
        <input type="text" name="e" id="f-e" placeholder="Required text field" required>
    </div>
    <input type="submit">
</form>

JS:

$(document).ready(function(){
    $('.form-validate').validate({
        errorContainer: $(this).find('.form-errors'),
        errorLabelContainer: $('ul', $(this).find('.form-errors')),
        wrapper: 'li',
    });
});

$.extend($.validator.messages, {
    required: "Fill all marked fields please"
});

Thanks ahead!

Sparky · Accepted Answer · 2018-06-16T23:08:39.387

0

Just use the groups option:

Specify grouping of error messages. A group consists of an arbitrary group name as the key and a space separated list of element names as the value.

$('.form-validate').validate({
    // your other options,
    groups: {
        mygroup: "q w e"
    }
});

DEMO: jsfiddle.net/8gxprw4y/

If your field names are being generated dynamically, then you will need to construct the groups option dynamically before you call .validate(). Here is an example.

var names = ""; // create empty string
$('[id^="f-"]').each(function() { // grab each input starting w/ the class
    names += $(this).attr('name') + " "; // append each name + single space to string
});
names = $.trim(names); // remove the empty space from the end

$('.form-validate').validate({
    // your other options,
    groups: {
        myGroup: names // reference the string
    }, 
    ....

DEMO 2: jsfiddle.net/8gxprw4y/3/

edited Jun 16 '18 at 23:08

answered Jun 15 '18 at 17:07

Sparky

98,165
25
199
285

Hello. Thanks for response. Sadly i can't use "name" attributes of inputs. The maximum i can use is "required" attribute or some className. – Mike Polo Jun 16 '18 at 22:50
@MikePolo, I don't understand what you're saying, because you're already using three `name` attributes in your OP. Secondly, [`name` attributes are mandatory and the jQuery Validate plugin will not work without them](https://jqueryvalidation.org/reference/#link-markup-recommendations). Finally, if you're telling me you just don't know the value of your `name` attributes, then that is a critical piece of information you should have mentioned in your OP. – Sparky Jun 16 '18 at 22:56
Sparky. Sorry for my bad language. Did not mentioned to notice what names are may be unknown. your last answer is good for me. Thanks alot! Will collect items by $('.form [required]'), instead of id in your example. This will work for me. Thanks onemoretime! – Mike Polo Jun 16 '18 at 23:08

Owais Noor · Answer 2 · 2018-06-16T12:54:31.153

First You have to include JQuery cdn's

<script  src="https://code.jquery.com/jquery-3.3.1.min.js"  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

and

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>

Then change your code Try This

<form class="form-validate" id="myForm" method="post" action="">
<div class="form-errors">
    <h3>Errors:</h3>
    <span id="errorMSG"> </span>
</div>
<h3>All fields required:</h3>
<div class="form-field">
    <input type="text" name="q" id="f-q" required  placeholder="Required text field" >
</div>
<div class="form-field">
    <input type="email" name="w" id="f-w" required  placeholder="Required email field"  >
</div>
<div class="form-field">
    <input type="text" name="e" id="f-e" required  placeholder="Required text field" >
</div>
<input type="submit" onclick="checkSubmission();">

And JQuery

function checkSubmission(){$("#myForm").validate({

      rules:
          {
            q: 
            {
                required: true,
            },
            w: 
            { 
                required:true,
            },
            e: 
            { 
                required:true,
            }
          },
       showErrors: function(errorMap, errorList) {
    $(".form-errors").html("All fields must be completed before you submit the form.");
}
       });     }

I have included jquery and validation plugin. Validation is works. The only thing i need - one error message for all required fields, and other errors must be displayed too. — Mike Polo, Jun 15 '18 at 16:54
@OwaisNoor, FYI - the plugin automatically picks up rules from the various inline attributes, HTML5 `required`, `type`, `class`, etc. — Sparky, Jun 15 '18 at 17:38

jQuery validation plugin - one error message for all required fields

2 Answers2