title: Multiple instances of jQuery Validation Plugin on a JSP page
body: <p>SOLVED: $.extend() twice in a row simply overwrites the previous object because objects are passed by reference. My fix was to do this: </p>
  
  <pre><code>var updateUserObj = $.extend({}, validationPluginDefaults);
      var newUserObj = $.extend({}, validationPluginDefaults);
  </code></pre>
  
  <p>Then the validators are executed like this: </p>
  
  <pre><code>var whateverValidator = $.extend(updateUserObj,{new rules})
  </code></pre>
  
  <p>Update: Further research shows that what I'm trying to do appears to be correct but the problem may be in the object I am extending - "validationPluginDefaults"). Here it is below: </p>
  
  <pre><code>var validationPluginDefaults = {
  ignore: [],
  errorElement: 'p', //default input error message container &lt;p&gt;
  errorClass: 'text-error', // default input error message class
  focusInvalid: true, //focus on the first invalid field
  messages: {},
  invalidHandler: function (event, validator) { //display error alert on form submit 
  
  },
  highlight: function (el) { // hightlight error inputs
      //jQuery(el).closest('.control-group').addClass('error'); // set error class to the control group
  },
  success: function (err, el) {
      jQuery(el).next(".text-error").hide();
      jQuery(el).next(".text-error").remove();
  
  
  },
  errorPlacement: function (error, element) {
      error.insertAfter(element);
  },
  onfocusin: function () {},
  onfocusout: function () {}
  </code></pre>
  
  <p>};</p>
  
  <p>From my testing it appears that even though I have two separate forms on a JSP page and each has different validation that I can still only use one jQuery Validate Plugin instance per page; is this correct? </p>
  
  <p>Here's my code: </p>
  
  <pre><code>// Define validation rules for form one
      var formOneValidator = $.extend(validationPluginDefaults,{
          rules: {
              firstName: {
                  minlength: 2,
                  onlyAlphaAndHyphen: true,
                  required: true,
              },
              lastName: {
                  minlength: 2,
                  required: true,
              },
              email: {
                  required: true,
                  email: true
              }
          }
      });
  
      var formTwoValidator = $.extend(validationPluginDefaults,{
          rules: {
              newFirstName: {
                  minlength: 2,
                  onlyAlphaAndHyphen: true,
                  required: true,
              },
              newLastName: {
                  minlength: 2,
                  required: true,
              },
              newEmail: {
                  required: true,
                  email: true,
              }
          }
      });
  
      $("#formOne").validate(formOneValidator); 
      $("#formTwo").validate(formTwoValidator);
  </code></pre>
  
  <p>What happens here is that formOne validator takes on all the rules of formTwoValidator after this code executes. </p>
  
  <p>Is the solution to have only one validator and swap out rules depending on which form I'm in? It just seems strange that I wouldn't be able to define separate validators for each form on the page. Am I fundamentally misunderstanding something here? </p>