/
var
/
www
/
barefootlaw.org
/
bios2
/
manager
/
Upload File
HOME
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <!--<link rel="shortcut icon" href="../images/favicon.png" type="image/png">--> <title>Quirk Responsive Admin Templates</title> <link rel="stylesheet" href="../lib/fontawesome/css/font-awesome.css"> <link rel="stylesheet" href="../lib/weather-icons/css/weather-icons.css"> <link rel="stylesheet" href="../lib/jquery-toggles/toggles-full.css"> <link rel="stylesheet" href="../lib/select2/select2.css"> <link rel="stylesheet" href="../css/quirk.css"> <script src="../lib/modernizr/modernizr.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="../lib/html5shiv/html5shiv.js"></script> <script src="../lib/respond/respond.src.js"></script> <![endif]--> </head> <body> <header> <div class="headerpanel"> <div class="logopanel"> <h2><a href="index.php">Quirk</a></h2> </div><!-- logopanel --> <div class="headerbar"> <a id="menuToggle" class="menutoggle"><i class="fa fa-bars"></i></a> <div class="searchpanel"> <div class="input-group"> <input type="text" class="form-control" placeholder="Search for..."> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div><!-- input-group --> </div> <div class="header-right"> <ul class="headermenu"> <li> <div id="noticePanel" class="btn-group"> <button class="btn btn-notice alert-notice" data-toggle="dropdown"> <i class="fa fa-globe"></i> </button> <div id="noticeDropdown" class="dropdown-menu dm-notice pull-right"> <div role="tabpanel"> <!-- Nav tabs --> <ul class="nav nav-tabs nav-justified" role="tablist"> <li class="active"><a data-target="#notification" data-toggle="tab">Notifications (2)</a></li> <li><a data-target="#reminders" data-toggle="tab">Reminders (4)</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="notification"> <ul class="list-group notice-list"> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-envelope"></i> </div> <div class="col-xs-10"> <h5><a href="">New message from Weno Carasbong</a></h5> <small>June 20, 2015</small> <span>Soluta nobis est eligendi optio cumque...</span> </div> </div> </li> <li class="list-group-item unread"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Renov Leonga is now following you!</a></h5> <small>June 18, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-user"></i> </div> <div class="col-xs-10"> <h5><a href="">Zaham Sindil is now following you!</a></h5> <small>June 17, 2015</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-thumbs-up"></i> </div> <div class="col-xs-10"> <h5><a href="">Rey Reslaba likes your post!</a></h5> <small>June 16, 2015</small> <span>HTML5 For Beginners Chapter 1</span> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <i class="fa fa-comment"></i> </div> <div class="col-xs-10"> <h5><a href="">Socrates commented on your post!</a></h5> <small>June 16, 2015</small> <span>Temporibus autem et aut officiis debitis...</span> </div> </div> </li> </ul> <a class="btn-more" href="">View More Notifications <i class="fa fa-long-arrow-right"></i></a> </div><!-- tab-pane --> <div role="tabpanel" class="tab-pane" id="reminders"> <h1 id="todayDay" class="today-day">...</h1> <h3 id="todayDate" class="today-date">...</h3> <h5 class="today-weather"><i class="wi wi-hail"></i> Cloudy 77 Degree</h5> <p>Thunderstorm in the area this afternoon through this evening</p> <h4 class="panel-title">Upcoming Events</h4> <ul class="list-group"> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>20</h4> <p>Aug</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5/CSS3 Live! United States</a></h5> <small>San Francisco, CA</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>05</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">Web Technology Summit</a></h5> <small>Sydney, Australia</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>25</h4> <p>Sep</p> </div> <div class="col-xs-10"> <h5><a href="">HTML5 Developer Conference 2015</a></h5> <small>Los Angeles CA United States</small> </div> </div> </li> <li class="list-group-item"> <div class="row"> <div class="col-xs-2"> <h4>10</h4> <p>Oct</p> </div> <div class="col-xs-10"> <h5><a href="">AngularJS Conference 2015</a></h5> <small>Silicon Valley CA, United States</small> </div> </div> </li> </ul> <a class="btn-more" href="">View More Events <i class="fa fa-long-arrow-right"></i></a> </div> </div> </div> </div> </div> </li> <li> <div class="btn-group"> <button type="button" class="btn btn-logged" data-toggle="dropdown"> <img src="images/photos/loggeduser.png" alt="" /> Elen Adarna <span class="caret"></span> </button> <ul class="dropdown-menu pull-right"> <li><a href="profile.html"><i class="glyphicon glyphicon-user"></i> My Profile</a></li> <li><a href="#"><i class="glyphicon glyphicon-cog"></i> Account Settings</a></li> <li><a href="#"><i class="glyphicon glyphicon-question-sign"></i> Help</a></li> <li><a href="signin.php"><i class="glyphicon glyphicon-log-out"></i> Log Out</a></li> </ul> </div> </li> <li> <button id="chatview" class="btn btn-chat alert-notice"> <span class="badge-alert"></span> <i class="fa fa-comments-o"></i> </button> </li> </ul> </div><!-- header-right --> </div><!-- headerbar --> </div><!-- header--> </header> <section> <div class="leftpanel"> <div class="leftpanelinner"> <!-- ################## LEFT PANEL PROFILE ################## --> <div class="media leftpanel-profile"> <div class="media-left"> <a href="#"> <img src="../images/photos/loggeduser.png" alt="" class="media-object img-circle"> </a> </div> <div class="media-body"> <h4 class="media-heading">Elen Adarna <a data-toggle="collapse" data-target="#loguserinfo" class="pull-right"><i class="fa fa-angle-down"></i></a></h4> <span>Software Engineer</span> </div> </div><!-- leftpanel-profile --> <div class="leftpanel-userinfo collapse" id="loguserinfo"> <h5 class="sidebar-title">Address</h5> <address> 4975 Cambridge Road Miami Gardens, FL 33056 </address> <h5 class="sidebar-title">Contact</h5> <ul class="list-group"> <li class="list-group-item"> <label class="pull-left">Email</label> <span class="pull-right">me@themepixels.com</span> </li> <li class="list-group-item"> <label class="pull-left">Home</label> <span class="pull-right">(032) 1234 567</span> </li> <li class="list-group-item"> <label class="pull-left">Mobile</label> <span class="pull-right">+63012 3456 789</span> </li> <li class="list-group-item"> <label class="pull-left">Social</label> <div class="social-icons pull-right"> <a href="#"><i class="fa fa-facebook-official"></i></a> <a href="#"><i class="fa fa-twitter"></i></a> <a href="#"><i class="fa fa-pinterest"></i></a> </div> </li> </ul> </div><!-- leftpanel-userinfo --> <ul class="nav nav-tabs nav-justified nav-sidebar"> <li class="tooltips active" data-toggle="tooltip" title="Main Menu"><a data-toggle="tab" data-target="#mainmenu"><i class="tooltips fa fa-ellipsis-h"></i></a></li> <li class="tooltips unread" data-toggle="tooltip" title="Check Mail"><a data-toggle="tab" data-target="#emailmenu"><i class="tooltips fa fa-envelope"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Contacts"><a data-toggle="tab" data-target="#contactmenu"><i class="fa fa-user"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Settings"><a data-toggle="tab" data-target="#settings"><i class="fa fa-cog"></i></a></li> <li class="tooltips" data-toggle="tooltip" title="Log Out"><a href="signin.php"><i class="fa fa-sign-out"></i></a></li> </ul> <div class="tab-content"> <!-- ################# MAIN MENU ################### --> <div class="tab-pane active" id="mainmenu"> <h5 class="sidebar-title">Favorites</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li><a href="index.php"><i class="fa fa-home"></i> <span>Dashboard</span></a></li> <li><a href="widgets.html"><span class="badge pull-right">10+</span><i class="fa fa-cube"></i> <span>Widgets</span></a></li> <li><a href="maps.php"><i class="fa fa-map-marker"></i> <span>Maps</span></a></li> </ul> <h5 class="sidebar-title">Main Menu</h5> <ul class="nav nav-pills nav-stacked nav-quirk"> <li class="nav-parent active"> <a href=""><i class="fa fa-check-square"></i> <span>Forms</span></a> <ul class="children"> <li><a href="general-forms.php">Form Elements</a></li> <li class="active"><a href="form-validation.html">Form Validation</a></li> <li><a href="form-wizards.html">Form Wizards</a></li> <li><a href="wysiwyg.html">Text Editor</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-suitcase"></i> <span>UI Elements</span></a> <ul class="children"> <li><a href="buttons.html">Buttons</a></li> <li><a href="icons.html">Icons</a></li> <li><a href="typography.html">Typography</a></li> <li><a href="alerts.html">Alerts & Notifications</a></li> <li><a href="tabs-accordions.html">Tabs & Accordions</a></li> <li><a href="sliders.html">Sliders</a></li> <li><a href="graphs.html">Graphs & Charts</a></li> <li><a href="panels.html">Panels</a></li> <li><a href="extras.html">Extras</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-th-list"></i> <span>Tables</span></a> <ul class="children"> <li><a href="basic-tables.html">Basic Tables</a></li> <li><a href="data-tables.html">Data Tables</a></li> </ul> </li> <li class="nav-parent"><a href=""><i class="fa fa-file-text"></i> <span>Pages</span></a> <ul class="children"> <li><a href="asset-manager.html">Asset Manager</a></li> <li><a href="people-directory.html">People Directory</a></li> <li><a href="timeline.html">Timeline</a></li> <li><a href="profile.html">Profile</a></li> <li><a href="blank.html">Blank Page</a></li> <li><a href="notfound.html">404 Page</a></li> <li><a href="signin.php">Sign In</a></li> <li><a href="signup.html">Sign Up</a></li> </ul> </li> </ul> </div><!-- tab-pane --> <!-- ######################## EMAIL MENU ##################### --> <div class="tab-pane" id="emailmenu"> <div class="sidebar-btn-wrapper"> <a href="compose.html" class="btn btn-danger btn-block">Compose</a> </div> <h5 class="sidebar-title">Mailboxes</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-mail"> <li><a href="email.html"><i class="fa fa-inbox"></i> <span>Inbox (3)</span></a></li> <li><a href="email.html"><i class="fa fa-pencil"></i> <span>Draft (2)</span></a></li> <li><a href="email.html"><i class="fa fa-paper-plane"></i> <span>Sent</span></a></li> </ul> <h5 class="sidebar-title">Tags</h5> <ul class="nav nav-pills nav-stacked nav-quirk nav-label"> <li><a href="#"><i class="fa fa-tags primary"></i> <span>Communication</span></a></li> <li><a href="#"><i class="fa fa-tags success"></i> <span>Updates</span></a></li> <li><a href="#"><i class="fa fa-tags warning"></i> <span>Promotions</span></a></li> <li><a href="#"><i class="fa fa-tags danger"></i> <span>Social</span></a></li> </ul> </div><!-- tab-pane --> <!-- ################### CONTACT LIST ################### --> <div class="tab-pane" id="contactmenu"> <div class="input-group input-search-contact"> <input type="text" class="form-control" placeholder="Search contact"> <span class="input-group-btn"> <button class="btn btn-default" type="button"><i class="fa fa-search"></i></button> </span> </div> <h5 class="sidebar-title">My Contacts</h5> <ul class="media-list media-list-contacts"> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user1.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Christina R. Hill</h4> <span><i class="fa fa-phone"></i> 386-752-1860</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user2.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Floyd M. Romero</h4> <span><i class="fa fa-mobile"></i> +1614-650-8281</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user3.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jennie S. Gray</h4> <span><i class="fa fa-phone"></i> 310-757-8444</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user4.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Alia J. Locher</h4> <span><i class="fa fa-mobile"></i> +1517-386-0059</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user5.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Nicholas T. Hinkle</h4> <span><i class="fa fa-skype"></i> nicholas.hinkle</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user6.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Jamie W. Bradford</h4> <span><i class="fa fa-phone"></i> 225-270-2425</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user7.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Pamela J. Stump</h4> <span><i class="fa fa-mobile"></i> +1773-879-2491</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user8.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Refugio C. Burgess</h4> <span><i class="fa fa-mobile"></i> +1660-627-7184</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user9.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Ashley T. Brewington</h4> <span><i class="fa fa-skype"></i> ashley.brewington</span> </div> </a> </li> <li class="media"> <a href="#"> <div class="media-left"> <img class="media-object img-circle" src="../images/photos/user10.png" alt=""> </div> <div class="media-body"> <h4 class="media-heading">Roberta F. Horn</h4> <span><i class="fa fa-phone"></i> 716-630-0132</span> </div> </a> </li> </ul> </div><!-- tab-pane --> <!-- #################### SETTINGS ################### --> <div class="tab-pane" id="settings"> <h5 class="sidebar-title">General Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Daily Newsletter</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Call Phones</h5> <small>Make calls to friends and family right from your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle-off toggle-light success"></div> </div> </li> </ul> <h5 class="sidebar-title">Security Settings</h5> <ul class="list-group list-group-settings"> <li class="list-group-item"> <h5>Login Notifications</h5> <small>Get notified when someone else is trying to access your account.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> <li class="list-group-item"> <h5>Phone Approvals</h5> <small>Use your phone when login as an extra layer of security.</small> <div class="toggle-wrapper"> <div class="leftpanel-toggle toggle-light success"></div> </div> </li> </ul> </div><!-- tab-pane --> </div><!-- tab-content --> </div><!-- leftpanelinner --> </div><!-- leftpanel --> <div class="mainpanel"> <div class="contentpanel"> <ol class="breadcrumb breadcrumb-quirk"> <li><a href="index.php"><i class="fa fa-home mr5"></i> Home</a></li> <li><a href="general-forms.php">Forms</a></li> <li class="active">Form Validation</li> </ol> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading nopaddingbottom"> <h4 class="panel-title">Basic Form Validation</h4> <p>Please provide your name, email address (won't be published) and a comment.</p> </div> <div class="panel-body"> <hr> <form id="basicForm" action="form-validation.html" class="form-horizontal"> <div class="form-group"> <label class="col-sm-3 control-label">Name <span class="text-danger">*</span></label> <div class="col-sm-8"> <input type="text" name="name" class="form-control" placeholder="Type your name..." required /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Email <span class="text-danger">*</span></label> <div class="col-sm-8"> <input type="email" name="email" class="form-control" placeholder="Type your email..." required /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">URL</label> <div class="col-sm-8"> <input type="url" name="url" class="form-control" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Comment <span class="text-danger">*</span></label> <div class="col-sm-8"> <textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea> </div> </div> <hr> <div class="row"> <div class="col-sm-9 col-sm-offset-3"> <button class="btn btn-success btn-quirk btn-wide mr5">Submit</button> <button type="reset" class="btn btn-quirk btn-wide btn-default">Reset</button> </div> </div> </form> </div><!-- panel-body --> </div><!-- panel --> </div><!-- col-md-6 --> <div class="col-md-6"> <div class="panel"> <div class="panel-heading nopaddingbottom"> <h4 class="panel-title">Error Message In One Container</h4> <p>Please provide your name, email address (won't be published) and a comment.</p> </div> <div class="panel-body nopaddingtop"> <hr> <form id="basicForm2" action="form-validation.html" class="form-horizontal"> <div class="error"></div> <div class="form-group"> <label class="col-sm-3 control-label">Name <span class="text-danger">*</span></label> <div class="col-sm-8"> <input type="text" name="name" class="form-control" title="Your name is required!" placeholder="Type your name..." required /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Email <span class="text-danger">*</span></label> <div class="col-sm-8"> <input type="email" name="email" class="form-control" title="Your email address is required!" placeholder="Type your email..." required /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">URL</label> <div class="col-sm-8"> <input type="url" name="url" title="Please enter a valid url!" class="form-control" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label">Comment <span class="text-danger">*</span></label> <div class="col-sm-8"> <textarea rows="5" class="form-control" name="comment" title="Please type a comment at least 6 characters long!" placeholder="Type your comment..." required></textarea> </div> </div> <hr> <div class="row"> <div class="col-sm-9 col-sm-offset-3"> <button class="btn btn-wide btn-primary btn-quirk mr5">Submit</button> <button type="reset" class="btn btn-wide btn-default btn-quirk">Reset</button> </div> </div> </form> </div><!-- panel-body --> </div><!-- panel --> </div><!-- col-md-6 --> </div><!--row --> <div class="row"> <div class="col-md-6"> <div class="panel"> <div class="panel-heading nopaddingbottom"> <h4 class="panel-title">With Checkboxes and Radio Buttons</h4> <p>Validating a form with a radio and checkbox buttons.</p> </div> <div class="panel-body nopaddingtop"> <hr> <form id="basicForm3" class="form-horizontal" action="form-validation.html"> <div class="form-group"> <label class="col-sm-3 control-label nopaddingtop">Platform <span class="text-danger">*</span></label> <div class="col-sm-9"> <label class="rdiobox"> <input id="platform" type="radio" name="platform" value="mac" required> <span>Mac OS</span> </label> <label class="rdiobox"> <input type="radio" name="platform" value="win"> <span>Windows</span> </label> <label class="error" for="platform"></label> </div> </div><!-- form-group --> <div class="form-group"> <label class="col-sm-3 control-label nopaddingtop">Browser <span class="text-danger">*</span></label> <div class="col-sm-9"> <label class="ckbox"> <input id="int[]" type="checkbox" name="int[]" required> <span>Firefox</span> </label> <label class="ckbox"> <input type="checkbox" name="int[]"> <span>Chrome</span> </label> <label class="ckbox"> <input type="checkbox" name="int[]"> <span>Safari</span> </label> <label class="error" for="int[]"></label> </div> </div><!-- form-group --> <hr> <div class="row"> <div class="col-sm-9 col-sm-offset-3"> <button class="btn btn-quirk btn-wide btn-primary mr5">Submit</button> <button type="reset" class="btn btn-quirk btn-wide btn-default">Reset</button> </div> </div> </form> </div><!-- panel-body --> </div><!-- panel --> </div><!-- col-md-6 --> <div class="col-md-6"> <div class="panel"> <div class="panel-heading nopaddingbottom"> <h4 class="panel-title">Validation With Select Boxes</h4> <p>Validating a form using select boxes with single or multiple selection.</p> </div> <div class="panel-body nopaddingtop"> <hr> <form id="basicForm4" class="form-horizontal" action="form-validation.html"> <div class="form-group"> <label class="col-sm-3 control-label">Fruits <span class="text-danger">*</span></label> <div class="col-sm-8"> <select id="fruits" class="select2" name="fruits" style="width: 100%" data-placeholder="Choose One" required> <option value=""> </option> <option value="apple">Apple</option> <option value="orange">Orange</option> <option value="grapes">Grapes</option> <option value="strawberry">Strawberry</option> </select> <label class="error" for="fruits"></label> </div> </div><!-- form-group --> <div class="form-group"> <label class="col-sm-3 control-label">Flowers <span class="text-danger">*</span></label> <div class="col-sm-8"> <select id="flowers" class="select2" name="flowers" style="width: 100%" data-placeholder="Choose One" title="Please select at least 2 flowers" multiple required> <option value=""> </option> <option value="lily">Lily</option> <option value="jasmine">Jasmine</option> <option value="daisy">Daisy</option> <option value="iris">Iris</option> <option value="rose">Rose</option> </select> <label class="error" for="flowers"></label> </div> </div><!-- form-group --> <hr> <div class="row"> <div class="col-sm-9 col-sm-offset-3"> <button class="btn btn-quirk btn-wide btn-primary mr5">Submit</button> <button type="reset" class="btn btn-quirk btn-wide btn-default">Reset</button> </div> </div> </form> </div><!-- panel-body --> </div><!-- panel --> </div><!-- col-md-6 --> </div><!-- row--> </div><!-- contentpanel --> </div><!-- mainpanel --> </section> <script src="../lib/jquery/jquery.js"></script> <script src="../lib/bootstrap/js/bootstrap.js"></script> <script src="../lib/jquery-toggles/toggles.js"></script> <script src="../lib/select2/select2.js"></script> <script src="../lib/jquery-validate/jquery.validate.js"></script> <script src="../js/quirk.js"></script> <script> $(document).ready(function(){ 'use strict'; // Basic Form $('#basicForm').validate({ highlight: function(element) { $(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { $(element).closest('.form-group').removeClass('has-error'); } }); // Error Message In One Container $('#basicForm2').validate({ errorLabelContainer: jQuery('#basicForm2 div.error') }); // With Checkboxes and Radio Buttons $('#basicForm3').validate({ highlight: function(element) { jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { jQuery(element).closest('.form-group').removeClass('has-error'); } }); // Validation with select boxes $('#basicForm4').validate({ highlight: function(element) { jQuery(element).closest('.form-group').removeClass('has-success').addClass('has-error'); }, success: function(element) { jQuery(element).closest('.form-group').removeClass('has-error'); } }); $('.select2').select2(); }); </script> --> </body> </html>