This is the just-validate library codes to validate my form, but it fails to submit the form after validation, it should submit after validating all the fields. I have tried to run these code but it does not run. These are the codes i've used. all field are verified. But it fails to submit the form
<!-- language: lang-js -->
<script>
const validation = new window.JustValidate('#appform', {
errorFieldCssClass: 'is-invalid',
errorLabelStyle: {
fontSize: '16px',
color: '#dc3545',
},
successFieldCssClass: 'is-valid',
successLabelStyle: {
fontSize: '16px',
color: '#20b418',
},
focusInvalidField: true,
lockForm: true,
});
validation
.addField('#fname', [
{
rule: 'required',
errorMessage: 'First name is required',
},{
rule: 'minLength',
value: 3,
},
])
.addField('#sname', [
{
rule: 'required',
errorMessage: 'Second name is required',
},{
rule: 'minLength',
value: 3,
},
])
.addField('#email', [
{
rule: 'required',
errorMessage: 'Email is required',
},
{
rule: 'email',
errorMessage: 'Enter a valid email',
}
])
.onSuccess((event) => {
document.getElementById("app-form").submit();
});
</script>
This in the CSS of my Code
<!-- language: lang-css -->
.form-group {
padding-right: 50px;
margin:20px;}
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
}
.btn {
display: inline-block;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;}
.btn-primary {
color: #212529;
background-color: #78d5ef;
border-color: #78d5ef; }
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Form Validation</title>
<script src="https://unpkg.com/just-validate#latest/dist/just-validate.production.min.js"></script>
<head>
<body>
<form id="appform" name="appform" action="process_form.php" method="post" novalidate >
<div class="form-group">
<input type="text" name="fname" id="fname" placeholder="First Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
</div>
<div class="form-group">
<input type="text" name="sname" id="sname" placeholder="Second Name" class="form-control text-capitalize" autocomplete="on" spellcheck="false">
</div>
<div class="form-group">
<input type="text" id="email" name="email" placeholder="jayrous#example.com" class="form-control">
</div>
<div class="form-group ">
<input type="submit" name="submit" id="submit" class="btn btn-primary " value= "Submit Form">
</div>
</body>
<!-- end snippet -->
The id of your form is "appform":
<form id="appform" ...
but your JavaScript code is trying to get the element with an id of "app-form", which is a totally different id:
document.getElementById("app-form").submit();
try changing them to match, e.g.
document.getElementById("appform").submit();
I'm currently working on a project for school. I am building both a backend and a frontend application. I have the POST working on the backend and i've tested it with postman and it posts and saves it in MongoDB. How would I get the post working if its on a browser? I have a form with firstname, lastname, email, and password. How do I post on the browser? Is it possible to post on live server?
I tried hosting it on heroku and it didn't work. I tried hosting on react but it works but I would rather do it on liveserver if its possible.
here is my html file for registering.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Register</title>
<style>
html{
background-color:hsl(60, 20%, 80%);
}
input[type=text],
input[type=password] {
width: 100%;
padding: 15px;
border: black 1.5px solid;
background: #f1f1f1;
}
input[type=text]:focus,
input[type=password]:focus {
background-color: #ddd;
outline: none;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.7;
}
button:hover {
opacity: 1;
}
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
.cancelbtn,
.signupbtn {
float: left;
width: 50%;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<form>
<h1>Sign Up</h1>
<p>Please fill in this form to create your accout.</p>
<label for="firstname"><b>First Name</b></label>
<input type="text" placeholder="Enter First Name" name="firstname" required>
<label for="lastname"><b>Last Name</b></label>
<input type="text" placeholder="Enter Last Name" name="lastname" required>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>
<div class="clearfix">
<button type="button" class="cancelbtn">Cancel</button>
<button type="submit" class="signupbtn">Sign Up</button>
</div>
</form>
</body>
</html>
here is my post method for the back end.
router.post('/', sanitizeBody, async (req, res) => {
console.log(req.sanitizeBody);
let password = await bcrypt.hash(req.body.password, saltrounds)
new User({
firstName: req.body.firstName,
lastName: req.body.lastName,
password,
email: req.body.email,
isStaff: req.body.isStaff
}).save().then(result => {
res.status(201).send(result);
}).catch(err => {
res.send(err);
})
})
I expect to post on the html page rather than posting it on postman. I would like it to post on the index.html live server when I hit submit.
How to validate a multiple step form and message display for each and every fields example:please enter your email and I also want all the error message to
be display at the same time :suppose I click on next button I should display all How to validate a multiple step form and message display for each and every feilds How to validate a multiple step form and message display for each and every fields
function isEmail(str) { // simple email validation
return /(.+)#(.+){2,}\.(.+){2,}/.test($.trim(str));
}
function isEmpty(str) { // test for empty string
return $.trim(str) === "";
}
function validate($div) { // validates any div - will not let you leave the div if error
var $fields = $div.find("input"), hasError = false;
$fields.each(function() {
$(this).removeClass("error")
hasError = this.name=="pword" && isEmpty(this.value);
if (hasError) {
$("#pword").addClass("error").focus();
return false;
}
hasError = this.name=="email" && (isEmpty(this.value) || !isEmail(this.value));
if (hasError) {
$("#email").addClass("error").focus();
return false;
}
hasError = isEmpty(this.value); // the rest of the fields
if (hasError) {
$(this).addClass("error").focus();
return false;
}
})
return hasError?false:true;
}
$(function() {
// validate all divs on submit, but actually only necessary to validate thediv the submit is on
$("#myForm").on("submit",function(e) {
$(".page").each(function() {
if (!validate($(this))) {
e.preventDefault(); // stop submission
return false;
}
});
});
$(".nav").on("click", function() {
var $parent = $(this).closest("div");
var $nextDiv = $(this).hasClass("next") ? $parent.next() : $parent.prev();
if (validate($parent)) { // is the div this button is on valid?
$parent.fadeOut(function() { // fade it out and fade the next one in
if ($nextDiv.length) {
$nextDiv.fadeIn()
for (var i=$(".page").length;i> $nextDiv.index(); i--) {
$("#bar" + i).css({"background-color": "#D8D8D8"}); // we are going backwards
}
$("#bar" + $nextDiv.index()).css({"background-color": "#38610B"});
}
});
}
});
});
body {
margin: 0 auto;
padding: 0;
text-align: center;
background-color: #D8D8D8;
}
#wrapper {
width: 995px;
padding: 0px;
margin: 0px auto;
font-family: helvetica;
position: relative;
}
#wrapper .baricon {
display: inline-block;
border-radius: 100%;
padding: 12px;
background-color: #38610B;
color: white;
}
#wrapper .progress_bar {
width: 200px;
height: 5px;
border-radius: 20px;
background-color: #D8D8D8;
display: inline-block;
}
#wrapper form div {
margin-left: 340px;
padding: 10px;
box-sizing: border-box;
width: 300px;
margin-top: 50px;
background-color: #585858;
}
#wrapper form div p {
color: #F2F2F2;
margin: 0px;
margin-top: 10px;
font-weight: bold;
}
#wrapper form div .form_head {
font-size: 22px;
font-weight: bold;
margin-bottom: 30px;
}
#wrapper form div input[type="text"] {
width: 200px;
height: 40px;
padding: 5px;
border-radius: 5px;
border: none;
margin-top: 10px;
}
#wrapper form div input[type="button"],
input[type="submit"] {
width: 80px;
height: 40px;
border-radius: 5px;
border: 2px solid white;
background: none;
color: white;
margin: 5px;
margin-top: 10px;
}
#user_details,
#qualification {
display: none;
}
.error { background-color:pink !important}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="wrapper">
<br>
<span class='baricon'>1</span>
<span id="bar1" class='progress_bar'> </span>
<span class='baricon'>2</span>
<span id="bar2" class='progress_bar'> </span>
<span class='baricon'>3</span>
<form method="post" action="" id="myForm">
<div id="account_details" class="page">
<p class='form_head'>Account Details</p>
<p>Email Address</p>
<input type="text" name="email" id="email" placeholder='Email Address'>
<p>Password</p>
<input type="text" name="pword" id="pword" placeholder='Password'>
<br>
<input type="button" value="Next" class="nav next" />
</div>
<div id="user_details" class="page">
<p class='form_head'>User Details</p>
<p>First Name</p>
<input type="text" name="fname" id="fname" placeholder='First Name'>
<p>Last Name</p>
<input type="text" name="lname" is="lname" placeholder='Last Name'>
<p>Gender</p>
<input type="text" name="gender" id="gender" placeholder='Gender'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="button" value="Next" class="nav next" />
</div>
<div id="qualification" class="page">
<p class='form_head'>Qualification</p>
<p>Qualification</p>
<input type="text" placeholder='Qualification'>
<p>Hobbies</p>
<input type="text" placeholder='Hobbies'>
<br>
<input type="button" value="Prev" class="nav prev" />
<input type="Submit" value="Submit">
</div>
</form>
</div>
You can use Jquery.validate.min.js file which contains validate method.
Refer the following code below:
function valid(){
$("#rform").validate({
rules:{
uname:"required", // uname, email are input names
umail:{
required:true,
email:true
},
upass:{
required:true,
minlength:8
}
},
messages:{
uname:"Please enter full name",
umail:{
required:"Please enter email id",
email:"Please enter valid email id"
},
upass:
{
required:"please provide password",
minlength:"min length of password is 8"
}
},
submitHandler :function(form){
// alert("it works!");
console.log("it works!");
// form.submit();
funreg(); //function to be called after submit button is pressed and al inputl fields are valids
}
});
}
I have been trying to get this to work for a while now. I cannot connect the login function to the form.
I have tried onsubmit on both the form tag and the button input tag, i have tried onclick but it does not get the code from js function.
index1.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google maps</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!--<link rel="http://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="util.js"></script>
<script src="JavaScript.js"></script>
<script type="text/javascript"></script>
<style>
#container {
width: 1200px;
}
#map {
width: 80%;
min-height: 600px;
/*float: right;*/
margin-top: 15px;
margin-left: auto;
margin-right: auto;
}
#img {
width: 150px;
height: 150px;
float: left;
margin-top: auto;
}
/*sökruta*/
#searchBox {
background-color: #ffffff;
padding: 5px;
font-family: 'Roboto','sans-serif';
margin-bottom: 10px;
float: top;
}
/*
html, body {
height: 100%;
margin: 0;
padding: 0;
}
*/
.search-form .form-group {
float: right !important;
transition: all 0.35s, border-radius 0s;
width: 32px;
height: 32px;
background-color: #fff;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
border-radius: 25px;
border: 1px solid #ccc;
}
.search-form .form-group input.form-control {
padding-right: 20px;
border: 0 none;
background: transparent;
box-shadow: none;
display:block;
}
.search-form .form-group input.form-control::-webkit-input-placeholder {
display: none;
}
.search-form .form-group input.form-control:-moz-placeholder {
/* Firefox 18- */
display: none;
}
.search-form .form-group input.form-control::-moz-placeholder {
/* Firefox 19+ */
display: none;
}
.search-form .form-group input.form-control:-ms-input-placeholder {
display: none;
}
.search-form .form-group:hover,
.search-form .form-group.hover {
width: 100%;
border-radius: 4px 25px 25px 4px;
}
.search-form .form-group span.form-control-feedback {
position: absolute;
top: -1px;
right: -2px;
z-index: 2;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
color: #3596e0;
left: initial;
font-size: 14px;
}
.form-group {
max-width: 300px;
margin-right: auto;
margin-left: auto;
}
</style>
</head>
<body id="container">
<img id="img" src="http://www2.math.su.se/icsim/images/sterik.jpg" alt="Stockholm"/>
<div class="row">
<br>
<div class="col-md-4 col-md-offset-3">
<form action="" class="search-form">
<div class="form-group has-feedback">
<label id="Search" class="sr-only">Search</label>
<input type="text" class="form-control" name="search" id="searchField" placeholder="Sök">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>
</form>
</div>
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in" onclick="login()">
</form>
</div>
<div id="map">
</div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPkC40KP9lMKHUsJW7q403qnwRqYkTno&callback=initMap">
</script>
</div>
</body>
JavaScript.js
function login() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
}
I have created working JSFiddle - Please Check : https://jsfiddle.net/5w6fg52m/1/
Below Code working fine :
<script>
//just change function name as it's conflict with button id
function login1() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if(username === "admin"
&& password === "123" )
{
alert( "validation succeeded" );
location.href="adminView.php";
}
else
{
alert( "validation failed" );
location.href="index1.html";
}
return false;
}
</script>
//HTML
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="button" id="login" value="Logga in" onclick="return login1();">
</form>
</div>
-> I have created other version of JSFiddle, so you come to know conflict issue easily: https://jsfiddle.net/5w6fg52m/2/
Here i have keep function name same(login) and change ID of submit button.
You can set the submit event directly to your like
document.getElementById("loginForm").onsubmit = function() { ... };
Bellow a sample snippet :
window.onload = function(){
document.getElementById("loginForm").onsubmit = function() {
//spara username och password i två varibler med samma namn från formet.
var username = document.getElementById("user").value;
var password = document.getElementById("password").value;
if (username === "admin" &&
password === "123") {
alert("validation succeeded");
//location.href = "adminView.php";
} else {
alert("validation failed");
//location.href = "index1.html";
}
// to prevent submit
return false;
}
}
<div class="form-group">
<form id="loginForm" name="loginForm" method="POST">
<label for="user">Användarnamn: </label>
<br>
<input class="form-control" type="text" id="user" name="user" required>
<br>
<label for="password">Lösenord: </label>
<br>
<input class="form-control" type="password" id="password" name="passwords" required>
<br>
<br>
<input class="form-control" type="submit" id="login" value="Logga in">
</form>
</div>
This happens when you declare variable or function with the same name as declare before. just rename login function or rename id="login".
I am making a login and register page. I am implementing form validation also. I want to do something like this- when the page loads first the LOGIN page gets active, when REGISTER is clicked then a register page gets active and display the form.
I have tried doing it over jsfiddle: jsfiddle link. I don't know why the transition effect does not work. It's just a simple transition on the panel-heading:
HTML-
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
LOGIN
</div>
<div class="col-xs-6">
REGISTER
</div>
</div>
JS-
$(document).ready(function() {
$("#login-form-link").click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$("#register-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$("#register-form-link").click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$("#login-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
});
After it I am focusing on the validation of the REGISTER form. Believe me the register form opens in my browser I don't know why the register form does not open in jsfiddle!
Please look at the form its like this:
My problem is that the validation is not working and I don't know why. I have looked at many Stack Overflow links (this one was helpful) but none helps now.
you have multiple syntax errors in jQuery code also you are using wrong libraries,
fiddle provided in question used bootstrapValidator library also jqueryValidation lib, these 2 libraries has nothing to do with formValidation
if you checked your browser console log, half of the problems syntax errors e.g
missing multiple commas
wrong use of semi colon
wrong use of inverted commas
can easily be fixed also you can found $(...).formValidation is not a function in console log too means library is missing.
here is the working fiddle
syntax error fixed and correct and required formValidation libraries added
transition effect working
validation of the register form working
$(document).ready(function() {
$("#login-form-link").click(function(e) {
$("#login-form").delay(100).fadeIn(100);
$("#register-form").fadeOut(100);
$("#register-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$("#register-form-link").click(function(e) {
$("#register-form").delay(100).fadeIn(100);
$("#login-form").fadeOut(100);
$("#login-form-link").removeClass("active");
$(this).addClass("active");
e.preventDefault();
});
$('#register-form').formValidation({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fullname: {
validators: {
notEmpty: {
message: "Please enter this field"
},
regexp: {
regexp: /^[A-Za-z\s]{1,}[\.]{0,1}[A-Za-z\s]{0,}$/,
message: "full name cannot contain this symbol "
}
}
},
username: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 5,
max: 15,
message: "username must be more than 5 and less than 15 characters long"
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'username can only consist of alphabets, numbers, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: "Please enter this field"
},
emailAddress: {
message: "invalid email!"
}
}
},
address: {
validators: {
notEmpty: {
message: "Please enter this field"
},
regexp: {
regexp: /^[a-zA-Z0-9\s,\/-]+$/,
message: "invalid symbol!"
}
}
},
pincode: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 6,
max: 6,
message: "invalid pincode!"
},
digits: {
message: "pin code can contain digits only"
}
}
},
phnumber: {
validators: {
notEmpty: {
message: "Please enter this field"
},
stringLength: {
min: 10,
max: 10,
message: "invalid phone number!"
},
digits: {
message: "phone number can contain digits only"
}
}
},
password: {
validators: {
notEmpty: {
message: "Please enter this field"
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
},
identical: {
field: "confirm_password",
message: 'password and its confirm are not the same'
}
}
},
confirm_password: {
validators: {
notEmpty: {
message: "Please enter this field"
},
identical: {
field: "password",
message: 'password and its confirm are not the same'
}
}
}
}
})
.on('success.form.bv', function(e) {
var $form = $(e.target);
var bv = $form.data('bootstrapValidator');
$.post($form.attr('action'), $form.serialize(), function(result) {
console.log(result);
}, 'json');
});
});
body {
padding-top: 90px;
}
.panel-login {
border-style: solid;
border-color: #7B68EE;
-webkit-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
box-shadow: 1px 2px 3px 1px rgba(0, 0, 0, 0.2);
}
.panel-login>.panel-heading {
color: #7B68EE;
background-color: #fff;
border-color: #fff;
text-align: center;
}
.panel-login>.panel-heading a {
text-decoration: none;
color: #666;
font-weight: bold;
font-size: 15px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login>.panel-heading a.active {
color: #7B68EE;
font-size: 18px;
}
.panel-login>.panel-heading hr {
margin-top: 10px;
margin-bottom: 0px;
clear: both;
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0));
}
.panel-login input[type="text"],
.panel-login input[type="email"],
.panel-login input[type="password"] {
height: 45px;
border: 1px solid #ddd;
font-size: 16px;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
transition: all 0.1s linear;
}
.panel-login input:hover,
.panel-login input:focus {
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border-color: #ccc;
}
input[type="submit"].btn-login {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
input[type="submit"].btn-login:hover,
input[type="submit"].btn-login:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
.forgot-password {
text-decoration: underline;
color: #888;
}
.forgot-password:hover,
.forgot-password:focus {
text-decoration: underline;
color: #666;
}
input[type="submit"].btn-register {
background-color: #59B2E0;
outline: none;
color: #fff;
font-size: 14px;
height: auto;
font-weight: normal;
padding: 14px 0;
text-transform: uppercase;
border-color: #59B2E6;
}
input[type="submit"].btn-register:hover,
input[type="submit"].btn-register:focus {
color: #fff;
background-color: #53A3CD;
border-color: #53A3CD;
}
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/formValidation.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.formvalidation/0.6.1/js/framework/bootstrap.min.js"></script>
<div class="container" style="margin-bottom: 5%;">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-login">
<div class="panel-heading">
<div class="row">
<div class="col-xs-6">
LOGIN
</div>
<div class="col-xs-6">
REGISTER
</div>
</div>
<hr>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form id="login-form" action="/login" method="post" role="form" style="display: block;">
<div class="form-group">
<input type="text" name="username" pattern="^[_A-z0-9]{1,}$" maxlength="15" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
<!--error message like: "username already exist" -->
<span><p><!--error message here--></p></span>
</div>
<div class="form-group">
<input type="password" name="password" data-minlength="6" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
<!--error message like: "username and password do not match" -->
<span><p><!--error message here--></p></span>
</div>
<div class="form-group text-center">
<input type="checkbox" tabindex="3" name="remember" id="remember">
<label for="remember">Remember me</label>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="login-submit" id="login-submit" tabindex="4" class="form-control btn btn-login" value="Log in">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-lg-12">
<div class="text-center">
Forgot Password?
</div>
</div>
</div>
</div>
</form>
<form id="register-form" action="/register" method="post" role="form" style="display: none;">
<!-- username -->
<div class="form-group">
<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="username" value="" required>
</div>
<!-- email -->
<div class="form-group">
<input type="email" name="email" id="Email" tabindex="1" class="form-control" placeholder="email" value="" data-error="Email address is invalid" required>
</div>
<!-- fullname -->
<div class="form-group">
<input type="text" name="fullname" id="Name" tabindex="1" class="form-control" placeholder="full name" value="" required>
</div>
<!-- address -->
<div class="form-group">
<input type="text" name="address" id="address" tabindex="1" class="form-control" placeholder="address" value="" required>
</div>
<!-- pincode -->
<div class="form-group">
<input type="text" name="pincode" id="pincode" tabindex="1" class="form-control" placeholder="pincode" value="" data-error="Invalid Pin code!" required>
</div>
<!-- phone number -->
<div class="form-group">
<input type="text" name="phnumber" id="phnumber" tabindex="1" class="form-control" placeholder="phone number" value="" data-error="Invalid Phone Number!" required>
</div>
<!-- password -->
<div class="form-group">
<input type="password" name="password" id="inputPassword" tabindex="1" class="form-control" placeholder="password" value="" required>
</div>
<!-- confirm password -->
<div class="form-group">
<input type="password" name="confirm_password" id="confirmPassword" tabindex="1" class="form-control" placeholder="confirm password" value="" required>
</div>
<!-- register button -->
<div class="form-group">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<input type="submit" name="register-submit" id="register-submit" tabindex="4" class="form-control btn btn-register" value="Register Now">
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>