"Form Validator"
Bootstrap 3.1.0 Snippet by mitchellias

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="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
<form id="registerForm" class="form-signin">
<h2 class="text-center">Got Credentials?<small></small></h2>
<p>
<img class="media-object img-responsive center-block" style="" src="https://s3-us-west-2.amazonaws.com/mchpstatic/Flat+Icon+SVG/SVG/support.svg" alt="...">
<p class="text-center">Set up your account:</p>
<div class='facebookSignup'>
<button href='/login/facebook' class="btn btn-lg btn-primary btn-block btn-facebook"><i class="fa fa-facebook fa-fw"></i> Log In with Facebook</button>
<hr> <span class="help-block text-center"> <a id='signUp'>Sign up</a>
</span>
</div>
<div class="form-group">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="firstName" placeholder="First Name" />
</div>
</div>
<div class="form-group">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="lastName" placeholder="Last Name" />
</div>
</div>
<div class="form-group">
<div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="text" class="form-control" name="username" placeholder="Username" />
</div>
</div>
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
.bv-form .help-block {
margin-bottom:0
}
.nav-tabs li.bv-tab-success>a {
color:#3c763d
}
.nav-tabs li.bv-tab-error>a {
color:#a94442
}
/* ladda.min.css */
/*
* Ladda
* http://lab.hakim.se/ladda
* MIT licensed
*
* Copyright (C) 2013 Hakim El Hattab, http://hakim.se
*/
.ladda-button {
position:relative
}
.ladda-button .ladda-spinner {
position:absolute;
z-index:2;
display:inline-block;
width:32px;
height:32px;
top:50%;
margin-top:-16px;
opacity:0;
pointer-events:none
}
.ladda-button .ladda-label {
position:relative;
z-index:3
}
.ladda-button .ladda-progress {
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
$(document).ready(function () {
$('#signUp').on('click', function () {
$('.facebookSignup').fadeOut(250, function () {
$('.form-group').fadeIn(500);
});
});
});
$(document).ready(function () {
$('#registerForm').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitHandler: function (validator, form, submitButton) {
$.post(form.attr('action'), form.serialize(), function (result) {
// The result is a JSON formatted by your back-end
// I assume the format is as following:
// {
// valid: true, // false if the account is not found
// username: 'Username', // null if the account is not found
// }
if (result.valid == true || result.valid == 'true') {
// You can reload the current location
window.location.reload();
// Or use Javascript to update your page, such as showing the account name
// $('#welcome').html('Hello ' + result.username);
} else {
// The account is not found
// Show the errors
$('#errors').html('The account is not found').removeClass('hide');
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Light Bootstrap Dashboard React
login-form
Login Form
Contact Form

Questions / Comments: