"Contact form with jquery validation"
Bootstrap 3.3.0 Snippet by banhaclong20

<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.7.0/css/font-awesome.min.css"> <div class="container"> <h2 class="text-center">Contact Us</h2> <div class="errors"> </div> <form action="<?=$_SERVER['PHP_SELF']?>" class="contact-form" method="POST"> <div class="form-group"> <input type="text" name="username" id="username" class="username form-control" placeholder="Your Username" value=""> <i class="fa fa-user"></i> <span class="asterix">*</span> <span class="cross">x</span> <span class="verify"><i class="fa fa-check" aria-hidden="true"></i></span> <div class="alert alert-danger custom-alert"> user must be more than 3 letter </div> </div> <div class="form-group"> <input type="text" name="email" class=" email form-control" placeholder="Your Email" value=""> <i class="fa fa-envelope"></i> <span class="asterix">*</span> <span class="cross">x</span> <span class="verify"><i class="fa fa-check" aria-hidden="true"></i></span> <div class="alert alert-danger custom-alert"> Email can not be empty </div> </div> <div class="form-group"> <input type="text" name="subject" class="subject form-control" placeholder="Your subject" value=""> <i class="fa fa-pencil"></i> <span class="asterix">*</span> <span class="cross">x</span> <span class="verify"><i class="fa fa-check" aria-hidden="true"></i></span> <div class="alert alert-danger custom-alert"> Subject can not be empty </div> </div> <div class="form-group"> <textarea class=" message form-control" name="message" placeholder="Your Message"></textarea> <i class="fa fa-comments message-icon"></i> <span class="asterix">*</span> <span class="cross">x</span> <span class="verify"><i class="fa fa-check" aria-hidden="true"></i></span> <div class="alert alert-danger custom-alert"> message should be more than <b>10</b> characteres </div> </div> <div class="form-group"> <input type="submit" value="send" class="btn btn-success btn-block"> <i class="fa fa-paper-plane send-icon"></i> </div> </form> </div>
/*start .contact-form*/ @import url('https://fonts.googleapis.com/css?family=Raleway'); body{ font-family: 'Raleway', sans-serif; background: url(../img/body_bg.jpg); background-repeat: no-repeat; background-size: cover; } h2{ font-weight: bold; font-size: 40px; } .contact-form{ max-width: 500px; margin: 50px auto; } .contact-form .form-group{ margin-bottom: 0; position: relative; } .contact-form input, .contact-form textarea{ margin-bottom: 20px; background: #ececec; } .contact-form input:focus{ border: 1px solid #999; outline: none !important; } .contact-form input{ padding-left: 30px; } .contact-form textarea{ height: 300px !important; padding-left: 30px; } .contact-form input[type="submit"]{ background: #5cb85c; } .contact-form i{ height: 0; float: left; position: relative; top: -44px; left: 10px; color: #fff; } .contact-form .message-icon{ position: relative; top: -310px; } .contact-form .send-icon{ color: #fff; } .asterix{ position: absolute; color: red; float: right; font-size: 59px; height: 0; /* overflow: hidden; */ right: 0; top: -11px;/ } span.cross { position: absolute; color: red; float: right; font-size: 26px; height: 0; /* overflow: hidden; */ right: 3px; top: -5px; display: none; } i.fa.fa-check { color: green; } span.verify { position: absolute; float: right; font-size: 22px; height: 0; right: 10px; top: 49px; display: none; } #alert-custom { padding: 7px; padding-right: 31px; } .custom-alert{ padding: 7px; display: none; }
$(function () { 'use strict'; // error variables var UserError = true, EmailError = true, SubError = true, MsgError = true; $(".username").blur(function() { if($(this).val().length < 4){ $(this).css('border','1px solid #F00'); $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300); UserError = true; }else{ $(this).css('border','1px solid #080'); $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300); UserError = false; } }); $(".email").blur(function() { if($(this).val() === ''){ $(this).css('border','1px solid #F00'); $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300); EmailError = true; }else{ $(this).css('border','1px solid #080'); $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300); EmailError = false; } }); $(".subject").blur(function() { if($(this).val() === ''){ $(this).css('border','1px solid #F00'); $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300); SubError = true; }else{ $(this).css('border','1px solid #080'); $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300); SubError = false; } }); $(".message").blur(function() { if($(this).val() .length < 10){ $(this).css('border','1px solid #F00'); $(this).parent().find('.custom-alert').fadeIn(300).end().find('.asterix').fadeOut(300).end().find('span.cross').fadeIn(300).end().find('span.verify').fadeOut(300); MsgError = true; }else{ $(this).css('border','1px solid #080'); $(this).parent().find('.custom-alert').fadeOut(300).end().find('.asterix').fadeOut(300).end().find('span.verify').fadeIn(300).end().find('span.cross').fadeOut(300); MsgError = false; } }); // submit form $('.contact-form').submit(function(event) { if(UserError === true || EmailError === true || SubError === true || MsgError === true){ event.preventDefault(); // prevent sending $('.username,.email,.subject,.message').blur(); } }); });

Related: See More


Questions / Comments: