title: How to validate US zip code using jQuery and show error message in red color above the text field in Bootstrap template?
body: <p>I'm using a Bootstrap template for my web app. Now in one form I'm accepting a US Zip code value from the user, submitting the form to the desired page and showing the result.</p>
  
  <p>Now I have to put validations for it as follows:</p>
  
  <ul>
  <li>The value entered by user in input field "<strong>zip_code</strong>" should only be <strong>Valid US zip code</strong>. If he/she enters invalid value then the error message in red color should appear above the text field intended for entering zip code. The form should not get submit.</li>
  <li>This validation should be done by using jQuery and on clicking of a map-marker icon which I made to behave like a submit button.</li>
  </ul>
  
  <p>Following is the necessary HTML code snippet :</p>
  
  <pre><code>&lt;div class="nav-collapse"&gt;
    &lt;ul class="nav  pull-right navbar-fixed-bottom"&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-user icon-black"&gt;&lt;/i&gt; LOGIN&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-pencil icon-black"&gt;&lt;/i&gt; REGISTER&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-edit icon-black"&gt;&lt;/i&gt; STATUS&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-envelope icon-black"&gt;&lt;/i&gt; CONTACT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-user  icon-black"&gt;&lt;/i&gt; MY ACCOUNT&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;&lt;i class="icon-user  icon-black"&gt;&lt;/i&gt; SHOP DESTINATOR&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;
        &lt;form action="abc.php" class="navbar-form pull-right" id="formzip" method="post"&gt;
          &lt;input style="width: 115px;" type="text" placeholder="Enter the zip code" name="zip_code" id="zip_code" value=""&gt; &lt;i class="icon-map-marker icon-black" onclick='$("#formzip").submit();'&gt;&lt;/i&gt;
        &lt;/form&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
  </code></pre>
  
  <p>As I'm a relatively new to the Bootstrap framework can someone please help me in this regard?</p>
  
  <p>Thanks for spending some of your valuable time in understanding my issue. If you need any other information regarding my issue please do let me know. Any kind of help would be greatly appreciated.</p>
  
  <p>Waiting for your precious replies.</p>