title: Using groups with jquery form validation. How?
body: <p>I've been reviewing the list of options available for the jquery form validation plugin (<a href="http://docs.jquery.com/Plugins/Validation/validate#toptions" rel="nofollow noreferrer">http://docs.jquery.com/Plugins/Validation/validate#toptions</a>). I'm tying to understand how the option <strong>groups</strong> work. The only code available in the official (?) website is:</p>
  
  <pre><code>// 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
   })
  </code></pre>
  
  <p>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 <strong>rules</strong> 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?</p>