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 name@domain.com" }
  },
});

Possible duplicate of [JQuery Validate multiple fields with one error](http://stackoverflow.com/questions/1289086/jquery-validate-multiple-fields-with-one-error) — flaudre, May 02 '16 at 16:36

3dgoo · Accepted Answer · 2012-12-05T05:42:44.713

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

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! — Stephen, Dec 05 '12 at 12:39

score 3 · Answer 2 · answered Dec 05 '12 at 05:14

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();
  }
}
})

score 2 · Answer 3 · answered Dec 05 '12 at 05:10

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.

score 0 · Answer 4 · answered Dec 05 '12 at 05:34

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 05 '12 at 05:34

Lucky

16,787
19
117
151

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

4 Answers4

Linked

Related