<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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>
<div class="row">
<span class="req-input message-box">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Please Include a Message."> </span>
<textarea type="textarea" data-min-length="10" placeholder="Message"></textarea>
</div>
<div class="row submit-row">
<button type="button" class="btn btn-block submit-form">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form>
<div id="contact-form" class="form-container" data-form-container style="color: rgb(46, 125, 50); background: rgb(200, 230, 201);">
<div class="row">
<div class="form-title">
<span> Create Post </span>
</div>
</div>
<div class="input-container">
<div class="row">
<span class="req-input valid" >
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Input your post title."> </span>
<input type="text" data-min-length="8" placeholder="Post Title" value="testing post">
</span>
</div>
<div class="row">
<span class="req-input message-box valid">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Post Contents."> </span>
<textarea type="textarea" data-min-length="10" placeholder="Post Contents">Valid contents </textarea>
</div>
<div class="row submit-row">
<button type="button" class="btn btn-block submit-form valid">Submit</button>
</div>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form>
<div id="login-form" class="form-container" data-form-container style="color: rgb(198, 40, 40); background: rgb(255, 205, 210);">
<div class="row">
<div class="form-title">
<span>Login</span>
</div>
</div>
<div class="input-container">
<div class="row">
<span class="req-input valid" >
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Input your email."> </span>
<input type="email" data-min-length="8" placeholder="Email" value="testing@gmail.com">
</span>
</div>
<div class="row">
<span class="req-input input-password invalid">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Password must be at least 8 characters long."> </span>
<input type="password" data-min-length="8" placeholder="Password">
</span>
</div>
<div class="row" style="display:none">
<span class="req-input confirm-password">
<span class="input-status" data-toggle="tooltip" data-placement="top" title="Password Must Match Initial Password Field."> </span>
<input type="password" data-min-length="8" placeholder="Confirm Password">
</span>
</div>
<div class="row">
<a class="create-account"> Create an Account </a>
</div>
<div class="row submit-row">
<button type="button" class="btn btn-block submit-form invalid">Login</button>
</div>
<div class="oauth-buttons">
<span><i class="fa fa-facebook"></i> </span>
<span><i class="fa fa-google-plus"></i> </span>
<span><i class="fa fa-linkedin"></i> </span>
<span><i class="fa fa-twitter"></i> </span>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
.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;
height:330px;
display:inline-block;
margin-top: -165px;
top: 50%;
left: 50%;
position: absolute;
margin-left: -200px;
}
.form-container .create-account:hover{
opacity:.7;
}
.form-container .create-account{
color:inherit;
margin-top: 15px;
display: inline-block;
cursor:pointer;
text-decoration:none;
}
.oauth-buttons .fa{
cursor:pointer;
margin-top:10px;
color:inherit;
width:30px;
height:30px;
text-align:center;
line-height:30px;
margin:5px;
margin-top:15px;
}
.oauth-buttons .fa:hover{
color:white;
}
.oauth-buttons .fa-google-plus:hover{
background: #dd4b39;
}
.oauth-buttons .fa-facebook:hover{
background: #8b9dc3;
}
.oauth-buttons .fa-linkedin:hover{
background: #0077b5;
}
.oauth-buttons .fa-twitter:hover{
background: #55acee;
}
.form-container .req-input .input-status {
display: inline-block;
height: 40px;
width: 40px;
float: left;
}
.form-container .input-status::before{
content: " ";
height:20px;
width:20px;
position:absolute;
top:10px;
left:10px;
color:white;
border-radius:50%;
background:white;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container .input-status::after{
content: " ";
height:10px;
width:10px;
position:absolute;
top:15px;
left:15px;
color:white;
border-radius:50%;
background:#00BCD4;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container .req-input{
width:100%;
float:left;
position:relative;
background:#00BCD4;
height:40px;
display:inline-block;
border-radius:0px;
margin:5px 0px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container div .row .invalid:hover{
background:#EF9A9A;
}
.form-container div .row .invalid{
background:#E57373;
}
.form-container .invalid .input-status:before {
width:20px;
height:4px;
top:19px;
left:10px;
background:white;/*#F44336;*/
border-radius:0px;
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.form-container .invalid .input-status:after {
width:20px;
height:4px;
background:white;
border-radius:0px;
top:19px;
left:10px;
-ms-transform: rotate(-45deg); /* IE 9 */
-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
transform: rotate(-45deg);
}
.form-container div .row .valid:hover{
background:#A5D6A7;
}
.form-container div .row .valid {
background:#81C784;
}
.form-container .valid .input-status:after {
border-radius:0px;
width: 17px;
height: 4px;
background: white;
top: 16px;
left: 15px;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.form-container .valid .input-status:before {
border-radius:0px;
width: 11px;
height: 4px;
background:white;
top: 19px;
left: 10px;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.form-container .input-container{
padding:0px 20px;
}
.form-container .row-input{
padding:0px 5px;
}
.form-container .req-input.input-password{
margin-bottom:0px;
}
.form-container .req-input.confirm-password{
margin-top:0px;
}
.form-container {
margin:20px;
padding:20px;
border-radius:0px;
background:#B3E5FC;
color:#00838F;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container .form-title{
font-size:25px;
color:inherit;
text-align:center;
margin-bottom:10px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container .submit-row{
padding:0px 0px;
}
.form-container .btn.submit-form{
margin-top:15px;
padding:12px;
background:#00BCD4;
color:white;
border-radius:0px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
.form-container .btn.submit-form:focus{
outline:0px;
color:white;
}
.form-container .btn.submit-form:hover{
background:#00cde5;
color:white;
}
.form-container .tooltip.top .tooltip-arrow {
border-top-color:#00BCD4 !important;
}
.form-container .tooltip.top.tooltip-invalid .tooltip-arrow {
border-top-color:#E57373 !important;
}
.form-container .tooltip.top.tooltip-invalid .tooltip-inner::before{
background:#E57373;
}
.form-container .tooltip.top.tooltip-invalid .tooltip-inner{
background:#FFEBEE !important;
color:#E57373;
}
.form-container .tooltip.top.tooltip-valid .tooltip-arrow {
border-top-color:#81C784 !important;
}
.form-container .tooltip.top.tooltip-valid .tooltip-inner::before{
background:#81C784;
}
.form-container .tooltip.top.tooltip-valid .tooltip-inner{
background:#E8F5E9 !important;
color:#81C784;
}
.form-container .tooltip.top .tooltip-inner::before{
content:" ";
width:100%;
height:6px;
background:#00BCD4;
position:absolute;
bottom:5px;
right:0px;
}
.form-container .tooltip.top .tooltip-inner{
border:0px solid #00BCD4;
background:#E0F7FA !important;
color:#00ACC1;
font-weight:bold;
font-size:13px;
border-radius:0px;
padding:10px 15px;
}
.form-container .tooltip {
max-width:150px;
opacity:1 !important;
}
.form-container .message-box{
width:100%;
height:auto;
}
.form-container textarea:focus,.form-container textarea:hover{
background:#fff;
outline:none;
border:0px;
}
.form-container .req-input textarea {
max-width:calc(100% - 50px);
width: 100%;
height: 80px;
border: 0px;
color: #777;
padding: 10px 9px 0px 9px;
float:left;
}
.form-container input[type=text]:focus, .form-container input[type=password]:focus, .form-container input[type=email]:focus, .form-container input[type=tel]:focus, .form-container select{
background:#fff;
color:#777;
border-left:0px;
outline:none;
}
.form-container input[type=text]:hover,.form-container input[type=password]:hover,.form-container input[type=email]:hover,.form-container input[type=tel]:hover, . form-container select{
background:#fff;
}
.form-container input[type=text], .form-container input[type=password], .form-container input[type=email],input[type=tel], form-container select{
width:calc(100% - 50px);
float:left;
border-radius:0px;
border:0px solid #ddd;
padding:0px 9px;
height:40px;
line-height:40px;
color:#777;
background:#fff;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}
$(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");
$(this).closest("[data-form-container]").find(".submit-form").text("Login");
$(".confirm-password").parent().slideUp(function(){
validate($(this).closest("[data-form-container]"));
});
} else {
$(this).closest("[data-form-container]").find(".submit-form").text("Create Account");
$(this).text("Already Have an Account");
$(".confirm-password").parent().slideDown(function(){
validate($(this).closest("[data-form-container]"));
});
}
});
$("[data-toggle='tooltip']").on("mouseover", function(){
console.log($(this).parent().attr("class"));
if($(this).parent().hasClass("invalid")){
$(".tooltip").addClass("tooltip-invalid").removeClass("tooltip-valid");
} else if($(this).parent().hasClass("valid")){
$(".tooltip").addClass("tooltip-valid").removeClass("tooltip-invalid");
} else {
$(".tooltip").removeClass("tooltip-invalid tooltip-valid");
}
});
})
function resetForm(target){
var container = target;
container.find(".valid, .invalid").removeClass("valid invalid")
container.css("background", "");
container.css("color", "");
}
function setRow(valid, Parent){
var error = 0;
if(valid){
Parent.addClass("valid");
Parent.removeClass("invalid");
} else {
error = 1;
Parent.addClass("invalid");
Parent.removeClass("valid");
}
return error;
}
function validate(target){
var error = 0;
target.find(".req-input input, .req-input textarea, .req-input select").each(function(){
var type = $(this).attr("type");
if($(this).parent().hasClass("confirm-password") && type == "password"){
var type = "confirm-password";
}
var Parent = $(this).parent();
var val = $(this).val();
if($(this).is(":visible") == false)
return true; //skip iteration
switch(type) {
case "confirm-password":
var initialPassword = $(".input-password input").val();
error += setRow(initialPassword == val && initialPassword.length > 0, Parent);
break;
case "password":
case "textarea":
case "text":
var minLength = $(this).data("min-length");
if(typeof minLength == "undefined")
minLength = 0;
error += setRow(val.length >= minLength, Parent);
break;
case "email":
error += setRow(validateEmail(val), Parent);
break;
case "tel":
error += setRow(phonenumber(val), Parent);
break;
}
});
var submitForm = target.find(".submit-form");
var formContainer = target;
var formTitle = target.find(".form-title");
if(error == 0){
formContainer.css("background", "#C8E6C9");
formContainer.css("color", "#2E7D32");
submitForm.addClass("valid");
submitForm.removeClass("invalid");
return true;
} else {
formContainer.css("background", "#FFCDD2");
formContainer.css("color", "#C62828");
submitForm.addClass("invalid");
submitForm.removeClass("valid");
return false;
}
}
function phonenumber(inputtxt) {
if(typeof inputtxt == "undefined")
return;
var phoneno = /^\d{10}$/;
if((inputtxt.match(phoneno))) {
return true;
}
else {
return false;
}
}
function validateEmail(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
