"Login & signup & contact form with validation colorful"
Bootstrap 3.3.0 Snippet by Roshankrsoni

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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">
<div class="row">
<div class="col-md-4">
<form>
<div id="contact-form" class="form-container" data-form-container>
<div class="row">
<div class="form-title">
<span>Contact Us</span>
</div>
</div>
<div class="input-container">
<div class="row">
<span class="req-input" >
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Input Your First and Last Name."> </span>
<input type="text" data-min-length="8" placeholder="Full Name">
</span>
</div>
<div class="row">
<span class="req-input">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Please Input Your Email."> </span>
<input type="email" placeholder="Email">
</span>
</div>
<div class="row">
<span class="req-input">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Please Input Your Phone Number."> </span>
<input type="tel" placeholder="Phone Number">
</span>
</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
.form-container div, .form-container span{
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.form-container ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #999;
}
.form-container :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #999;
opacity: 1;
}
.form-container ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #999;
opacity: 1;
}
.form-container :-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #999;
}
.form-container :placeholder-shown { /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
color: #999;
}
.oauth-buttons {
text-align:center;
}
.row {
text-align:center;
}
#login-form{
min-width:375px;
}
.login-container{
width:400px;
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
$(function(){
$('[data-toggle="tooltip"]').tooltip();
$(".req-input input, .req-input textarea").on("click input", function(){
validate($(this).closest("[data-form-container]"));
});
//This is for the on blur, if the form fields are all empty but the target was one of the fields do not reset to defaul state
var currentlySelected;
$(document).mousedown(function(e) {
currentlySelected = $(e.target);
});
//Reset to form to the default state of the none of the fields were filled out
$(".req-input input, .req-input textarea").on("blur", function(e){
var Parent = $(this).closest("[data-form-container]");
//if the target that was clicked is inside this form then do nothing
if(typeof currentlySelected != "undefined" && currentlySelected.parent().hasClass("req-input") && Parent.attr("id") == currentlySelected.closest(".form-container").attr("id"))
return;
var length = 0;
Parent.find("input").each(function(){
length += $(this).val().length;
});
Parent.find("textarea").each(function(){
length += $(this).val().length;
});
if(length == 0){
var container = $(this).closest(".form-container");
resetForm(container);
}
});
$(".create-account").on('click', function(){
if($(".confirm-password").is(":visible")){
$(this).text("Create an Account");
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: