Sign In Sign Up Bootstrap Template With Validation
Simple Sign In and Sig Up form Template in Bootstrap 4 with validation. Check Live Preview.
<html>
<head>
<title>Login & Registration Bootstrap 4 Form Template</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="https://cdn.tutorialjinni.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.tutorialjinni.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.tutorialjinni.com/jquery-validate/1.19.1/jquery.validate.js"></script>
<link href="https://fonts.googleapis.com/css?family=Kaushan+Script" rel="stylesheet">
<link href="https://cdn.tutorialjinni.com/font-awesome/5.12.0/css/all.css" rel="stylesheet">
<style>
body{
padding-top:4.2rem;
padding-bottom:4.2rem;
background:rgba(0, 0, 0, 0.76);
}
a{
text-decoration:none !important;
}
h1,h2,h3{
font-family: 'Kaushan Script', cursive;
}
.myform{
position: relative;
display: -ms-flexbox;
display: flex;
padding: 1rem;
-ms-flex-direction: column;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,.2);
border-radius: 1.1rem;
outline: 0;
max-width: 500px;
}
.tx-tfm{
text-transform:uppercase;
}
.mybtn{
border-radius:50px;
}
.login-or {
position: relative;
color: #aaa;
margin-top: 10px;
margin-bottom: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.span-or {
display: block;
position: absolute;
left: 50%;
top: -2px;
margin-left: -25px;
background-color: #fff;
width: 50px;
text-align: center;
}
.hr-or {
height: 1px;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.google {
color:#666;
width:100%;
height:40px;
text-align:center;
outline:none;
border: 1px solid lightgrey;
}
form .error {
color: #ff0000;
}
#second{display:none;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mx-auto">
<div id="first">
<div class="myform form ">
<div class="logo mb-3">
<div class="col-md-12 text-center">
<h1>Login</h1>
</div>
</div>
<form action="" method="post" name="login">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Password</label>
<input type="password" name="password" id="password" class="form-control" aria-describedby="emailHelp" placeholder="Enter Password">
</div>
<div class="form-group">
<p class="text-center">By signing up you accept our <a href="#">Terms Of Use</a></p>
</div>
<div class="col-md-12 text-center ">
<button type="submit" class=" btn btn-block mybtn btn-primary tx-tfm">Login</button>
</div>
<div class="col-md-12 ">
<div class="login-or">
<hr class="hr-or">
<span class="span-or">or</span>
</div>
</div>
<div class="col-md-12 mb-3">
<p class="text-center">
<a href="javascript:void();" class="google btn mybtn"><i class="fa fa-google-plus">
</i> Signup using Google
</a>
</p>
</div>
<div class="form-group">
<p class="text-center">Don't have account? <a href="#" id="signup">Sign up here</a></p>
</div>
</form>
</div>
</div>
<div id="second">
<div class="myform form ">
<div class="logo mb-3">
<div class="col-md-12 text-center">
<h1 >Signup</h1>
</div>
</div>
<form action="#" method="post" name="registration">
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" name="firstname" class="form-control" id="firstname" aria-describedby="emailHelp" placeholder="Enter Firstname">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" name="lastname" class="form-control" id="lastname" aria-describedby="emailHelp" placeholder="Enter Lastname">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Password</label>
<input type="password" name="password" id="password" class="form-control" aria-describedby="emailHelp" placeholder="Enter Password">
</div>
<div class="col-md-12 text-center mb-3">
<button type="submit" class=" btn btn-block mybtn btn-primary tx-tfm">Get Started For Free</button>
</div>
<div class="col-md-12 ">
<div class="form-group">
<p class="text-center"><a href="#" id="signin">Already have an account?</a></p>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$("#signup").click(function () {
$("#first").fadeOut("fast", function () {
$("#second").fadeIn("fast");
});
});
$("#signin").click(function () {
$("#second").fadeOut("fast", function () {
$("#first").fadeIn("fast");
});
});
$(function () {
$("form[name='login']").validate({
rules: {
email: {
required: true,
email: true
},
password: {
required: true,
}
},
messages: {
email: "Please enter a valid email address",
password: {
required: "Please enter password",
}
},
submitHandler: function (form) {
form.submit();
}
});
});
$(function () {
$("form[name='registration']").validate({
rules: {
firstname: "required",
lastname: "required",
email: {
required: true,
email: true
},
password: {
required: true,
minlength: 5
}
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
email: "Please enter a valid email address"
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
</body>
</html>
Click to Load Comments
