title: How to validate password field in bootstrap?
body: <p>I am working in asp.net with bootstrap. I want to validate password field. My code display info box when the user click on password field. </p>
  
  <pre><code>&lt;div id="pswd_info"&gt;
    &lt;h4&gt;Password requirements:&lt;/h4&gt;
       &lt;ul&gt;
         &lt;li id="letter" class="invalid fa-warning"&gt; At least &lt;strong&gt;one letter&lt;/strong&gt;&lt;/li&gt;
         &lt;li id="capital" class="invalid"&gt; At least &lt;strong&gt;one capital letter&lt;/strong&gt;&lt;/li&gt;
         &lt;li id="number" class="invalid"&gt; At least &lt;strong&gt;one number&lt;/strong&gt;&lt;/li&gt;
         &lt;li id="special" class="invalid"&gt; At least &lt;strong&gt;one special character&lt;/strong&gt;&lt;/li&gt;
         &lt;li id="length" class="invalid"&gt; Be at least &lt;strong&gt;8 characters&lt;/strong&gt;&lt;/li&gt;
       &lt;/ul&gt;
     &lt;/div&gt;
  </code></pre>
  
  <h2>javascript</h2>
  
  <pre><code> &lt;!-- password info box--&gt;
      &lt;script&gt;
          $(document).ready(function () {
  
              $('#password').keyup(function () {
  
                  // set password variable
                  var pswd = $(this).val();
  
                  //validate the length
                  if (pswd.length &lt; 8) {
                      $('#length').removeClass('valid').addClass('invalid');
                  } else {
                      $('#length').removeClass('invalid').addClass('valid');
                  }
  
                  //validate letter
                  if (pswd.match(/[A-z]/)) {
                      $('#letter').removeClass('invalid').addClass('valid');
                  } else {
                      $('#letter').removeClass('valid').addClass('invalid');
                  }
  
                  //validate capital letter
                  if (pswd.match(/[A-Z]/)) {
                      $('#capital').removeClass('invalid').addClass('valid');
                  } else {
                      $('#capital').removeClass('valid').addClass('invalid');
                  }
  
                  //validate number
                  if (pswd.match(/\d/)) {
                      $('#number').removeClass('invalid').addClass('valid');
                  } else {
                      $('#number').removeClass('valid').addClass('invalid');
                  }
  
                  //validate special character
                  if (pswd.match(/[!@#$ %^&amp;*]/)){
                      $('#special').removeClass('invalid').addClass('valid');
                  } else {
                      $('#special').removeClass('valid').addClass('invalid');
                  }
  
              });
              $('#password').focus(function () {
                  $('#pswd_info').show();
              });
              $('#password').blur(function () {
                  $('#pswd_info').hide();
              });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>The above code just display the info box and change each li depend on user entry. But, still accept any password that does not meet the criteria. How can I validate the #password field? I already have the below script that validate other fields</p>
  
  <h2>JavaScript</h2>
  
  <pre><code> &lt;script&gt;
        // initialize the validator function
        validator.message.date = 'not a real date';
        // validate a field on "blur" event, a 'select' on 'change' event &amp; a '.reuired' classed multifield on 'keyup':
        $('form')
          .on('blur', 'input[required], input.optional, select.required', validator.checkField)
          .on('change', 'select.required', validator.checkField)
          .on('keypress', 'input[required][pattern]', validator.keypress);
        $('.multi.required').on('keyup blur', 'input', function() {
          validator.checkField.apply($(this).siblings().last()[0]);
        });
        $('form').submit(function(e) {
          e.preventDefault();
          var submit = true;
          // evaluate the form using generic validaing
          if (!validator.checkAll($(this))) {
            submit = false;
          }
          if (submit)
            this.submit();
          return false;
        });
      &lt;/script&gt;
  </code></pre>