"Login / Sign up toggle form (with validation)"
Bootstrap 3.3.0 Snippet by polltery

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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 ---------->
<section class="container text-center">
<div class="login">
<h1><span id="formHeading">Login or </span><a id="formOption" onclick="formToggle()" href="#">Sign Up</a></h1>
<!--Login form-->
<form id="login_form" name="login_form" method="post" action="login()">
<p hidden class="well" id="login_validation_errors"></p>
<input id="login_user" type="text" name="login_user" value="" placeholder="Username or Email"></br>
<input id="login_password" type="password" name="login_password" value="" placeholder="Password"></br>
<label>
<input type="checkbox" name="login_remember_checkbox" id="login_remember_checkbox"> Remember me on this computer
</label></br>
<input id="login_submit" type="submit" name="login_submit" value="Login">
</form>
<!--Signup form-->
<form hidden name="signup_form" id="signup_form" mehtod="post" action="login()">
<p hidden class="well" id="signup_validation_errors"></p>
<input id="signup_email" type="text" name="signup_email" value="" placeholder="Email"></br>
<input id="signup_username" type="text" name="signup_username" value="" placeholder="Username or Email"></br>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*
// Validation (Makes use of validate.js library, http://rickharrison.github.io/validate.js/)
var login_validator = new FormValidator('login_form', [{
name: 'login_user',
display: 'Username/Email',
rules: 'required'
}, {
name: 'login_password',
display: 'password',
rules: 'required'
}], function(errors, event) {
if (errors.length > 0) {
// Show the errors
var errorString = '';
for (var i = 0, errorLength = errors.length; i < errorLength; i++) {
errorString += errors[i].message + '<br />';
}
$('#login_validation_errors').show(250);
$('#login_validation_errors').html(errorString);
}
});
var signup_validator = new FormValidator('signup_form', [{
name: 'signup_email',
display: 'Email',
rules: 'required|valid_email',
}, {
name: 'signup_username',
display: 'Username',
rules: 'required|min_length[4]'
}, {
name: 'signup_password',
display: 'Password',
rules: 'required|min_length[8]'
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard PRO
Bootstrap 4.11 sign in form
Sign up form [Validations NOT ACHIEVED]
login-form

Questions / Comments: