<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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"> <h1><span class="glyphicon glyphicon-user"></span> Form Basic Login</h1> <blockquote> <p>Login validate javascript function basic</p> <footer> <em>Username : admin | Password : admin</em> </footer> </blockquote> <div class="boxbg"> <h2><strong>Login</strong></h2> <hr/> <form> <div id="divuser" class="form-group has-feedback"> <label for="username">Username :</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="text" class="form-control" id="username"> </div> <span id="useroksts" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="usererrsts" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> </div> <div id="divpass" class="form-group has-feedback"> <label for="password">Password :</label> <div class="input-group"> <span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span> <input type="password" class="form-control" id="password" aria-describedby="inputGroupSuccess1Status"> </div> <span id="passoksts" class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> <span id="passerrsts" class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span> </div> <div class="form-group"> <button type="submit" class="btn btn-primary">Sumit</button> </div> </form> </div> </div>

.boxbg{ margin-left:auto; margin-right:auto; margin-top:20px; padding:1px 20px 20px 20px; width:400px; border-radius:5px; background-color:#333333;/*#53AEFF;*/ box-shadow:1px 1px 5px #333333; } label{ color:#fff; text-shadow:1px 1px 1px #000; } h1{ padding-bottom:10px; border-bottom:1px solid #ccc; } h2{ color:#FFF; text-shadow:2px 1px 3px #000; }

$(document).ready(function(){ /* has-success | has-error */ $("#useroksts").hide(); $("#usererrsts").hide(); $("#passoksts").hide(); $("#passerrsts").hide(); });