title: Validate input text in bootstrap modal
body: <p>I want to validate a form in a bootstrap modal without using any framework. It's actually a simple modal with only an input text and two buttons "Close" and "Send". 
  The user should type his/her name in the input box and click send. The form is the sent with the method post.</p>
  
  <p>What I want to do is that, if the user doesn't enter anything in the input box of and clicks on the button "Send", the input box should have a red border circling it instead of the default blue border. Here's the code for my modal:</p>
  
  <pre><code>&lt;div id="myModal" class="modal fade" tabindex="-1"&gt;
      &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
              &lt;!--form--&gt;
  
              &lt;form class = "form-horizontal" id="myForm" method="post" action="test.php" role="form"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-hidden="true"&gt;&amp;times;&lt;/button&gt;
                      &lt;h4 class="modal-title"&gt;My modal&lt;/h4&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;p&gt;
                          Please enter your name:
                      &lt;/p&gt;
                      &lt;br/&gt;
  
                      &lt;div class="form-group"&gt;
  
                          &lt;div class="col-lg-12"&gt;
                              &lt;label class="control-label" for="firstname"&gt;Name&lt;/label&gt;
                              &lt;input type="text" class="form-control required" id="firstname" name="firstname"&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button id="myFormSubmit" class="btn btn-primary"&gt;Send&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I tried using javascript to change the class of the input text to <code>has-error</code>but it doesn't produce the red outline. When I click on send it sends the empty value through the post method instead of 
  Here's my javascript code:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          $('#myForm').validate({
              rules: {
                  name: {
                      minlength: 1,
                      required: true
                  },
              },
              highlight: function (element) {
                  $('#firstname').removeClass('has-success').addClass('has-error');
              },
              success: function (element) {
                  $('#firstname').removeClass('has-error').addClass('has-success');
              }
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>I feel like I'm mixing a whole lot of things here. I'm still new to bootstrap and javascript. How can I go about getting the desired red outline?
  Thanks.</p>
  
  <p>Edit: 
  Validate function:</p>
  
  <pre><code>function validate() {
      var x = document.forms["myForm"]["firstname"].value;
      if (x == null || x == "") {
          return false;
      }
  }
  </code></pre>