Bootstrap 3 + Validation Plugin

by javajack

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="https://code.jquery.com/jquery.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <div class="panel panel-primary">
      <div class="panel-heading">
        <h3 class="panel-title">Sign In</h3>
      </div>
      <div class="panel-body">
        <p class="lead">Please sign in using your username and password to proceed.</p>
        <form id="LoginForm" role="form" class="form-horizontal" autocomplete="off" method="post">
        <div class="form-group">
          <label class="control-label col-sm-3 col-md-3" for="Username">Username:</label>
          <div class="col-md-5 col-xm-6">
            <input type="text" class="form-control" id="Username" name="Username" placeholder="Username" value="" required="required" />
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-sm-3 col-md-3" for="Password">Password:</label>
          <div class="col-md-5 col-xm-6">
            <input type="password" class="form-control" id="Password" name="Password" placeholder="Password" required="required" />
            <span class="help-block"></span>
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-3 col-md-offset-3 col-lg-offset-3 col-md-9">
            <button id="SubmitBtn" name="SubmitBtn" type="submit" class="btn btn-large btn-primary">Sign in</button>
             
          </div>
        </div>
        </form>
      </div>
    </div>

CSS

body {
    padding: 20px;
}

JavaScript

$(document).ready(function () {
    var Username = $("#Username");
    var Password = $("#Password");
    var LoginForm = $('#LoginForm');
    var SubmitBtn = $('#SubmitBtn');
 
    LoginForm.validate();
 
    Username.rules("add", {
      required: true,
      rangelength: [3, 20],
      messages: {
        required: "You must provide your username.",
        rangelength: "The user name must be between 3 and 20 characters in length."
      }
    });
    Password.rules("add", {
      required: true,
      messages: {
        required: "You must provide your password."
      }
    });
 
    $('#LoginForm').submit(function () {
      if ($(this).valid()) {
        $('#SubmitBtn').prop('disabled', true);
        return true;
      }
      return false;
    });
 
  });