title: Simple jquery validation - custom position error message placement
body: <p>I am using <strong>jquery validate plugin to validate number in a form</strong> , how can i place the returned error message under the input button , i am unable to achieve,</p>
  
  <p>Here is my image with the issue and what i need,pls check - <a href="http://i.imgur.com/Gt5aNxs.png" rel="nofollow">http://i.imgur.com/Gt5aNxs.png</a></p>
  
  <p><strong>Please suggest me how to put the error message in a custom Div under the button instead of default underneath.</strong></p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;section id="contact" class="content"&gt;
              &lt;div class="container"&gt;
                  &lt;h2&gt;Contact Form Demo&lt;/h2&gt;
                  &lt;div class="row"&gt;
                      &lt;div class="span12 contact-form"&gt;
  
                          &lt;form action="mail.php" method="POST" class="form-horizontal contact-form" id="contact-form"&gt;
                            &lt;!--&lt;?php $formKey-&gt;outputKey(); ?&gt; --&gt;
                            &lt;fieldset&gt;  
  
                                &lt;div class="control-group"&gt;
                                  &lt;label class="control-label" for="inputPhone"&gt;Phone&lt;/label&gt;
                                  &lt;div class="controls"&gt;
                                    &lt;input class="input-80" name="phone" type="text" id="inputPhone" placeholder="inc. country &amp;amp; area code"&gt;
                                  &lt;/div&gt;
                                &lt;/div&gt;
  
  
                                &lt;div class="control-group"&gt;
                                  &lt;div class="controls"&gt;
                                    &lt;button type="submit" value="Send" class="btn" id="btn-place"&gt;Send!&lt;/button&gt;
                                  &lt;/div&gt;
                                  &lt;div &gt;place here&lt;/div&gt;
                                &lt;/div&gt;
                              &lt;/fieldset&gt;
                          &lt;/form&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
          &lt;!-- javascript --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/jquery.validate.min.js"&gt;&lt;/script&gt;
  
  
  
          &lt;script&gt;
  
              // contact form validation
              $(document).ready(function(){
  
               $('#contact-form').validate(
                   {
                    rules: {
                      name: {
                        minlength: 3,
                        required: true
                      },
                      email: {
                        required: true,
                        email: true
                      },
                      phone: {
                        minlength: 11,
                        required: false,
                        number: true
                      },
                      subject: {
                        minlength: 3,
                        required: true
                      },
                      message: {
                        minlength: 20,
                        required: true
                      }
                    },
                              highlight: function(label) {
                      $(label).closest('.control-group').addClass('error');
                    },
                    success: function(label) {
                      label
                        .text('OK!').addClass('valid')
                        .closest('.control-group').addClass('success');
                    }
                   });
  
                  // contact form submission, clear fields, return message,script no shown here
  
          &lt;/script&gt;
  </code></pre>