title: Form Validation With Bootstrap (jQuery)
body: <p>Can someone please help me with this code? I am using bootstrap for the form and trying to validate it with jQuery. Unfortunately, the form validation isn't telling me what I'm doing wrong. I got the script from <a href="http://jqueryvalidation.org/documentation/" rel="noreferrer">http://jqueryvalidation.org/documentation/</a> and followed a tutorial for client-sided validation.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  &lt;head&gt;
          &lt;meta charset="utf=8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;script src="js/jquery.validate.min.js"&gt;&lt;/script&gt; //Script found online
  
          &lt;script&gt;
              $(document).ready(function(){
  
               $('#contact-form').validate(
               {
                rules: {
                  name: {
                    minlength: 2,
                    required: true
                  },
                  email: {
                    required: true,
                    email: true
                  },
                  message: {
                    minlength: 2,
                    required: true
                  }
                },
                highlight: function(element) {
                  $(element).closest('.control-group').removeClass('success').addClass('error');
                },
                success: function(element) {
                  element
                  .text('OK!').addClass('valid')
                  .closest('.control-group').removeClass('error').addClass('success');
                }
               });
              }); // end document.ready
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;div class="hero-unit"&gt;  
          &lt;h1&gt;Contact Form&lt;/h1&gt; &lt;/br&gt;
  
      &lt;form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form"&gt;  
          &lt;div class="control-group"&gt;  
              &lt;label class="control-label" for="name"&gt;Name&lt;/label&gt;  
              &lt;div class="controls"&gt;  
                  &lt;input type="text" name="name" id="name" placeholder="Your name"&gt;  
              &lt;/div&gt;  
          &lt;/div&gt;  
          &lt;div class="control-group"&gt;  
              &lt;label class="control-label" for="email"&gt;Email Address&lt;/label&gt;  
              &lt;div class="controls"&gt;  
                  &lt;input type="text" name="email" id="email" placeholder="Your email address"&gt;  
              &lt;/div&gt;  
          &lt;/div&gt;
          &lt;div class="control-group"&gt;  
              &lt;label class="control-label" for="subject"&gt;Subject&lt;/label&gt;
              &lt;div class="controls"&gt; 
                      &lt;select id="subject" name="subject"&gt;
                          &lt;option value="na" selected=""&gt;Choose One:&lt;/option&gt;
                          &lt;option value="service"&gt;Feedback&lt;/option&gt;
                          &lt;option value="suggestions"&gt;Suggestion&lt;/option&gt;
                          &lt;option value="support"&gt;Question&lt;/option&gt;
                          &lt;option value="other"&gt;Other&lt;/option&gt;
                      &lt;/select&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="control-group"&gt;  
              &lt;label class="control-label" for="message"&gt;Message&lt;/label&gt;  
              &lt;div class="controls"&gt;  
                  &lt;textarea name="message" id="message" rows="8" class="span5" placeholder="The message you want to send to us."&gt;&lt;/textarea&gt;  
              &lt;/div&gt;  
          &lt;/div&gt;  
          &lt;div class="form-actions"&gt;  
              &lt;input type="hidden" name="save" value="contact"&gt;  
              &lt;button type="submit" class="btn btn-success"&gt;Submit Message&lt;/button&gt; 
              &lt;button type="reset" class="btn"&gt;Cancel&lt;/button&gt;  
          &lt;/div&gt;  
      &lt;/form&gt;  
  
  &lt;/div&gt;  
  
          &lt;script src="http://code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/bootstrap.js"&gt;&lt;/script&gt;
  
  
      &lt;/body&gt;
  </code></pre>
  
  <p></p>