<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-4"> <div class="panel-body"> <form action="" id="payment-form" class="form-horizontal"> <!-- <form role="form"> --> <fieldset> <legend>Payment Details</legend> <div class="form-group"> <label for="cardNumber">Card Number</label> <div class="input-group"> <input type="text" class="form-control" id="cardNumber" placeholder="Valid Card Number" required autofocus /> <span class="input-group-addon"> <span class="glyphicon glyphicon-lock"></span> </span> </div> <!-- .input-group --> </div> <!-- .form-group --> <div class="row"> <div class="col-xs-7 col-md-7"> <div class="form-group"> <label for="expiryMonth">Card Expiry Date</label> <div class="col-xs-6 col-lg-6 pl-ziro"> <input type="text" class="form-control" id="expityMonth" placeholder="MM" required /> </div> <!-- .col-xs-6 .col-lg-6 .pl-ziro --> <div class="col-xs-6 col-lg-6 pl-ziro"> <input type="text" class="form-control" id="expityYear" placeholder="YY" required /> </div> <!-- .col-xs-6 .col-lg-6 .pl-ziro --> </div> <!-- .form-group --> </div> <!-- .col-xs-7 .col-md-7 --> <div class="col-xs-5 col-md-5 pull-right"> <div class="form-group"> <label for="cvCode">CV Code</label> <input type="password" class="form-control" id="cvCode" placeholder="CV" required /> </div> <!-- .form-group --> </div> <!-- .col-xs-5 .col-md-5 .pull-right --> </div> <!-- .row --> </fieldset> </form> </div> <!-- .panel-body --> <ul class="nav nav-pills nav-stacked"> <li class="active"> <a href="#"> <span class="badge pull-right"> <span class="glyphicon glyphicon-usd"> </span>xxx.xx </span> Total Payment</a> </li> </ul> <br /> <a href="#" class="btn btn-success btn-lg btn-block" role="button">Pay</a> <a href="#" class="btn btn-default btn-lg btn-block" role="button">Cancel</a> </div> <!-- .col-xs-12 .col-md-4 end --> </div> <!-- .row end --> </div> <!-- .container end -->

body { margin-top:20px; } .panel-title { display: inline; font-weight: bold; } .legend { display: inline; font-weight: bold; margin-right:50px; } .checkbox .pull-right { margin: 5px; } .pl-ziro { padding-left: 0px; }

$('#payment-form').validate( { rules: { name: { minlength: 2, required: true }, email: { required: true, email: true }, subject: { minlength: 2, required: 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'); } });