Using jQuery validate plugin to output a single error message for multiple fields

Question

I'm using the jQuery validate plugin to validate a form. All fields are mandatory and space for error messages is limited on the form, so is it possible to show a single error message if any of the fields from my rules aren't completed which says, 'All fields must be completed before you submit the form' ?

My jQuery knowledge is limited and I can only figure from examples how to set it up so that it outputs individual error messages for each field using the following code:

$(".contact-form").validate({
  errorLabelContainer: ".form-errors",
  wrapper: "li",
  ignore: ".ignore",
  errorElement: "em",
  rules: {
    first_name: { required: true },
    last_name: { required: true },
    email: { required: true, email: true }
  },
  messages: {
    first_name: "Please enter your first name",
    last_name: "Please enter your last name",
    email: { required: "Please enter your email address", email: "Your email address must be in the format of [email protected]" }
  },
});

Possible duplicate of JQuery Validate multiple fields with one error — flaudre
– flaudre, Commented May 2, 2016 at 16:36

3dgoo · Accepted Answer · 2012-12-05 05:42:44Z

8

This will do what you have asked for:

Javascript

$(".contact-form").validate({
    ignore: ".ignore",
    rules: {
        first_name: {
            required: true
        },
        last_name: {
            required: true
        },
        email: {
            required: true,
            email: true
        }
    }, 
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});

Demo

Although this error message isn't very good for when someone enters an incorrect email address, as all fields have been filled in but there is still an error in the form.

Also, note you can specify required fields in the form by setting their class attribute to required:

HTML

<form class="contact-form" type="post" action="">
    <input type="text" name="first_name" id="first_name" class="required" />
    <input type="text" name="last_name" id="last_name" class="required" />
    <input type="email" name="email" id="email" class="required email" />
    <input type="submit" />
    <div class="form-errors"></div>
</form>

Javascript

$(".contact-form").validate({
    showErrors: function(errorMap, errorList) {
        $(".form-errors").html("All fields must be completed before you submit the form.");
    }
});

Demo

edited Dec 5, 2012 at 5:42

answered Dec 5, 2012 at 5:37

3dgoo

15.8k6 gold badges49 silver badges59 bronze badges

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

1 Comment

Stephen Over a year ago

This worked great with jQuery validate, so thanks for this. Also, thanks for the tip about using classes - this will save me so much time in future!

B-and-P · Accepted Answer · 2012-12-05 05:14:31Z

3

Looks like the invalidHandler is what you need. Take a look at this example (source: http://docs.jquery.com/Plugins/Validation/validate#toptions):

$(".selector").validate({
   invalidHandler: function(form, validator) {
  var errors = validator.numberOfInvalids();
  if (errors) {
    var message = errors == 1
      ? 'You missed 1 field. It has been highlighted'
      : 'You missed ' + errors + ' fields. They have been highlighted';
    $("div.error span").html(message);
    $("div.error").show();
  } else {
    $("div.error").hide();
  }
}
})

answered Dec 5, 2012 at 5:14

B-and-P

1,72310 silver badges28 bronze badges

Comments

Anshu · Accepted Answer · 2012-12-05 05:10:32Z

2

fxnReqValidation = function (event) {
        $("#errormsg").empty();
        $("input:text").each(function (index, InputElement) {
            var Ele = g_Json[InputElement.name];
            if ((Ele.required) && (InputElement.value == "" || null)) {
                $("#errormsg").append("" + All fields must be completed before you submit the form + "");                
            }           
        });
        event.preventDefault();
    }

This may helpful to u.

answered Dec 5, 2012 at 5:10

Anshu

6167 silver badges19 bronze badges

Comments

Lucky · Accepted Answer · 2012-12-05 05:34:04Z

0

You can use toggle() method to toggle between messages and use jquery plugin...it think it quick better and easy to code...

answered Dec 5, 2012 at 5:34

Lucky

17.4k20 gold badges121 silver badges156 bronze badges

Collectives™ on Stack Overflow

Using jQuery validate plugin to output a single error message for multiple fields

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related