"Login & signup & contact form with validation colorful"
Bootstrap 4.0.0 Snippet by ArKai

<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 .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); }

Related: See More


Questions / Comments: