"Login form with validation fill"
Bootstrap 3.3.0 Snippet by vrstudio

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Login</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> <link rel="stylesheet" href="http://bootswatch.com/yeti/bootstrap.min.css"> <link rel="stylesheet" href="style.css"> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon"/> </head> <body> <center> <div class="login"> <h1 class="loginheading">Login</h1> <form method="post" action=".php"> <div class="form-group nameInput has-feedback"> <label for="name">Username</label> <input type="text" class="form-control" name="name" id="name" placeholder="Type something to see validation..."> </div> <div class="form-group emailInput has-feedback"> <label for="email">Email</label> <input type="email" class="form-control" name="email" id="email" placeholder="Don't type here to see validation..."> </div> <button type="submit" class="btn btn-default">Submit</button> <p class="loginbottomtext">Still don't have an account? <a>Register</a></p> </form> <!-- ©©© COPYRIGHT ©©©--><p class="text-muted loginbottomtext">© VRstudio</p> </div> </center> </body> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> <script src="script.js"></script> </html>
body{ background-image: url(http://333v.ru/uploads/2d/2d4d43f97670e12bfe37960f915f89e0.jpg); } .login{ background-color: white; width: 350px; box-shadow: 0 0 10px rgba(0,0,0,0.5); margin-top: 5%; padding-left: 10px; padding-right: 10px; padding-top: 10px; } .loginheading{ text-align: center; margin-bottom: 30px; } .loginbottomtext{ text-align: center; margin-top: 20px; } .pagecontainer{ margin-top: 30px; background-color: white; box-shadow: 0 0 10px rgba(0,0,0,0.5); margin-left: 20px; margin-right: 20px; } .pageheader { width: 100%; height: 60px; background-color: #ff6800; margin: 0; padding: 0; } .menubutton{ color: white; background-color: #ff6800; border: 0px solid transparent; font-size: 20pt; margin-top: 10px; } .pagetitle{ color: white; margin: 10px; } .contentheight{ height: 300px; }
$(document).ready(function(){ $("button").click(function(e){ e.preventDefault(); var name = $("#name").val(); var email = $("#email").val(); if(name == "" || name == null){ $(".nameInput").removeClass("has-success"); $(".nameInput .glyphicon-ok").remove(); $(".nameInput").addClass("has-error").append(" <span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>"); var flag1 = ("false"); } else{ $(".nameInput").removeClass("has-error"); $(".nameInput .glyphicon-remove").remove(); $(".nameInput").addClass("has-success").append(" <span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>"); var flag1 = ("true"); }; if(email == "" || email == null){ $(".emailInput").removeClass("has-success"); $(".emailInput .glyphicon-ok").remove(); $(".emailInput").addClass("has-error").append(" <span class='glyphicon glyphicon-remove form-control-feedback' aria-hidden='true'></span>"); var flag2 = ("false"); } else{ $(".emailInput").removeClass("has-error"); $(".emailInput .glyphicon-remove").remove(); $(".emailInput").addClass("has-success").append(" <span class='glyphicon glyphicon-ok form-control-feedback' aria-hidden='true'></span>"); var flag2 = ("true"); }; if(flag1 == "true"){ if(flag2 == "true"){ location.href = 'http://www.yandex.ru/'; } else{ }; } else{ }; }); });

Related: See More

BLK• Design System
login-form
Login Form
Bootstrap Two Login Form

Questions / Comments: