title: Display Error Message in a separate div using jQuery validation
body: <p>I am using jQuery validation and I am wanting to display the error message in a div <code>&lt;div class="alert alert-error" id="errorContainer"&gt;</code> The default of showing below the forms does not work with my form design. </p>
  
  <p>The validation script is linked to the page I have the form on and it looks like: </p>
  
  <pre><code>    $(function validate() {
  
      var rules = {
                  rules: {
                      full_name: {
                          minlength: 2,
                          maxlength: 50,
                          required: true
                      },
                      address: {
                          minlength: 5,
                          required: true
                      },
                      city: {
                          minlength: 2,
                          required: true
                      },
                      state: {
                          minlength: 2,
                          maxlength: 2,
                          required: true
                      },
                      zip: {
                          minlength:5, 
                          maxlength:5,
                          required: true
                      },
                      phone: {
                          required: true,
                          phoneUS: true
                      },
                      phone_other: {
                          required: true,
                          phoneUS: true
                      },
                      email: {
                          required: true,
                          email: true
                      },
                      date_to_start: {
                          required: true
                      },
                      ssn: {
                          required: true,
                          ssn: true,
                      },
                      salary: {
                          required: true
                      }
  
                  }
              };
  
          var validationObj = $.extend (rules, Application.validationRules);
  
          $('#employment-application').validate(validationObj);
  
  });
  </code></pre>
  
  <p>Now I did try changing <code>$('#employment-application').validate(validationObj);</code> to the code below as well as tried adding it to the bottom of the page I have the form on, both gave negative results. The script seems to add <code>style="display:none;"</code> to the <code>errorContainer</code> and does not load any errors anywhere. </p>
  
  <p>(tried changing <code>$('#employment-application').validate(validationObj);</code> to the below)</p>
  
  <pre><code>$("#employment-application").validate({
          errorContainer: "#errorContainer", 
          errorLabelContainer: "#errorContainer", 
          errorElement: "li"
      })
  </code></pre>
  
  <p>So re-cap, I am wanting to use jQuery Form Validation and display the error messages received in a separate div because the default does not work with my form design.</p>