Using groups with jquery form validation. How?

Question

I've been reviewing the list of options available for the jquery form validation plugin (http://docs.jquery.com/Plugins/Validation/validate#toptions). I'm tying to understand how the option groups work. The only code available in the official (?) website is:

// Use a table layout for the form, placing error messages in the next cell after the input.
$("#myform").validate({
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" 
                 || element.attr("name") == "lname" )
       error.insertAfter("#lastname");
     else
       error.insertAfter(element);
   },
   debug:true
 })

I understand that they are creating a group called "username" that groups two elements in a form: "fname" and "lname", but how is that groupd used? Actually, the first question I have is: what are the groups for? I thought it was to instruct the plugin to handle the elements in a group as a single unit and to also display a single error in case any of the elements trigger one (for example, if the two textboxes are marked as required, using the rules element, and if a value is missing in any of the two or the two of them then a single error label is displayed instead of two if the two elements have errors), but I've been trying with several examples and have not been able to get it work in this way. So, what are they for? how should I use them?

Community · Accepted Answer · 2017-05-23 11:54:01Z

7

The sum of what the groups option does is to only report one error message for all the things within the group. In the given example, if you did not group the fname and lname and both were required, then you would get two error messages. With the group, you only get one. Both elements of the group are still required.

It sounds like you understand that correctly, but it's hard to tell why you aren't getting that example to work. With this HTML:

<form id="myform">
  First Name: <input type="text" name="fname" id="fname"/><br>
  Last Name: <input type="text" name="lname" id="lname"/><br>

    <input type="submit"/>
</form>

And this validate code:

$("#myform").validate({
    rules: {
        fname: { required: true },
        lname: { required: true }
    },
  groups: {
    username: "fname lname"
  },
  errorPlacement: function(error, element) {
     if (element.attr("name") == "fname" 
                 || element.attr("name") == "lname" )
       error.insertAfter("#lname");
     else
       error.insertAfter(element);
   }
 })

It looks OK to me: http://jsfiddle.net/ryleyb/cbJj6/

A much more complicated example that I helped someone with is here: Using the jQuery validate plugin to check if one or more checkboxes (with different names) are selected
Ultimately, the groups part of that question required that one checkbox in a group of checkboxes be checked, and only one message was wanted if it wasn't.

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Jan 3, 2013 at 21:01

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

3 Comments

Cesar Vinas Over a year ago

Thanks, Ryley. I don't know what I was doing wrong, but the example is working now. However, know that I've moved the code to a master page the group is no longer working. It seems it's related to the way the .Net changes the name of the controls in a form when they are in a master page. Do you know what I have to use for the names of the controls in the group? I've tried with control.ClientID and control.UniqueID, but none works.

Cesar Vinas Over a year ago

Nevermind. I figured it out. Now I want to change the error message. Right now I'm getting the default one "this field is required.". How do I do that? I've tried with messages: {credentials: "My custom message."},, but it doesn't work. BTW, credentials is the name of my group.

Ryley Over a year ago

@CesarVinas - you still have to reference error messages by each of the elements of the group. So you would need messages: { fname: { required: 'My custom message.' } }

Collectives™ on Stack Overflow

Using groups with jquery form validation. How?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related