Improved Password Validation And Added Password Hide/Show Button

build/css/custom.min.css

@@ -7,3 +7,7 @@
  */.tabs-left,.tabs-right{border-bottom:none;padding-top:2px}.tabs-left{border-right:1px solid #F7F7F7}.tabs-right{border-left:1px solid #F7F7F7}.tabs-left>li,.tabs-right>li{float:none;margin-bottom:2px}.tabs-left>li{margin-right:-1px}.tabs-right>li{margin-left:-1px}.tabs-left>li.active>a,.tabs-left>li.active>a:hover,.tabs-left>li.active>a:focus{border-bottom-color:#F7F7F7;border-right-color:transparent}.tabs-right>li.active>a,.tabs-right>li.active>a:hover,.tabs-right>li.active>a:focus{border-bottom:1px solid #F7F7F7;border-left-color:transparent}.tabs-left>li>a{border-radius:4px 0 0 4px;margin-right:0;display:block;background:#F7F7F7;text-overflow:ellipsis;overflow:hidden}.tabs-right>li>a{border-radius:0 4px 4px 0;margin-right:0;background:#F7F7F7;text-overflow:ellipsis;overflow:hidden}.sideways{margin-top:50px;border:none;position:relative}.sideways>li{height:20px;width:120px;margin-bottom:100px}.sideways>li>a{border-bottom:1px solid #ddd;border-right-color:transparent;text-align:center;border-radius:4px 4px 0px 0px}.sideways>li.active>a,.sideways>li.active>a:hover,.sideways>li.active>a:focus{border-bottom-color:transparent;border-right-color:#ddd;border-left-color:#ddd}.sideways.tabs-left{left:-50px}.sideways.tabs-right{right:-50px}.sideways.tabs-right>li{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.sideways.tabs-left>li{-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.morris-hover{position:absolute;z-index:1000}.morris-hover.morris-default-style{padding:6px;color:#666;background:rgba(243,242,243,0.8);border:solid 2px rgba(195,194,196,0.8);font-family:sans-serif;font-size:12px;text-align:center}.morris-hover.morris-default-style .morris-hover-row-label{font-weight:bold;margin:0.25em 0}.morris-hover.morris-default-style .morris-hover-point{white-space:nowrap;margin:0.1em 0}.price{font-size:40px;font-weight:400;color:#26B99A;margin:0}.prod_title{border-bottom:1px solid #DFDFDF;padding-bottom:5px;margin:30px 0;font-size:20px;font-weight:400}.product-image img{width:90%}.prod_color li{margin:0 10px}.prod_color li p{margin-bottom:0}.prod_size li{padding:0}.prod_color .color{width:25px;height:25px;border:2px solid rgba(51,51,51,0.28) !important;padding:2px;border-radius:50px}.product_gallery a{width:100px;height:100px;float:left;margin:10px;border:1px solid #e5e5e5}.product_gallery a img{width:100%;margin-top:15px}.product_price{margin:20px 0;padding:5px 10px;background-color:#FFFFFF;text-align:left;border:2px dashed #E0E0E0}.price-tax{font-size:18px}.product_social{margin:20px 0}.product_social ul li a i{font-size:35px}.login{background:#F7F7F7}.login .fa-paw{font-size:26px}a.hiddenanchor{display:none}.login_wrapper{right:0px;margin:0px auto;margin-top:5%;max-width:350px;position:relative}.registration_form,.login_form{position:absolute;top:0px;width:100%}.registration_form{z-index:21;opacity:0;width:100%}.login_form{z-index:22}#signup:target ~ .login_wrapper .registration_form,#signin:target ~ .login_wrapper .login_form{z-index:22;-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft;-webkit-animation-delay:.1s;animation-delay:.1s}#signup:target ~ .login_wrapper .login_form,#signin:target ~ .login_wrapper .registration_form{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}.animate{-webkit-animation-duration:0.5s;-webkit-animation-timing-function:ease;-webkit-animation-fill-mode:both;-moz-animation-duration:0.5s;-moz-animation-timing-function:ease;-moz-animation-fill-mode:both;-o-animation-duration:0.5s;-o-animation-timing-function:ease;-o-animation-fill-mode:both;-ms-animation-duration:0.5s;-ms-animation-timing-function:ease;-ms-animation-fill-mode:both;animation-duration:0.5s;animation-timing-function:ease;animation-fill-mode:both}.login_box{padding:20px;margin:auto}.left{float:left}.calendar.left{float:initial !important}.alignleft{float:left;margin-right:15px}.alignright{float:right;margin-left:15px}.clearfix:after,form:after{content:".";display:block;height:0;clear:both;visibility:hidden}.login_content{margin:0 auto;padding:25px 0 0;position:relative;text-align:center;text-shadow:0 1px 0 #fff;min-width:280px}.login_content a,.login_content .btn-default:hover{text-decoration:none}.login_content a:hover{text-decoration:underline}.login_content h1{font:normal 25px Helvetica, Arial, sans-serif;letter-spacing:-0.05em;line-height:20px;margin:10px 0 30px}.login_content h1:before,.login_content h1:after{content:"";height:1px;position:absolute;top:10px;width:27%}.login_content h1:after{background:#7e7e7e;background:-webkit-gradient(linear, left top, right top, from(#7e7e7e), to(#fff));background:linear-gradient(to right, #7e7e7e 0%, #fff 100%);right:0}.login_content h1:before{background:#7e7e7e;background:-webkit-gradient(linear, right top, left top, from(#7e7e7e), to(#fff));background:linear-gradient(to left, #7e7e7e 0%, #fff 100%);left:0}.login_content h1:before,.login_content h1:after{content:"";height:1px;position:absolute;top:10px;width:20%}.login_content h1:after{background:#7e7e7e;background:-webkit-gradient(linear, left top, right top, from(#7e7e7e), to(#fff));background:linear-gradient(to right, #7e7e7e 0%, #fff 100%);right:0}.login_content h1:before{background:#7e7e7e;background:-webkit-gradient(linear, right top, left top, from(#7e7e7e), to(#fff));background:linear-gradient(to left, #7e7e7e 0%, #fff 100%);left:0}.login_content form{margin:20px 0;position:relative}.login_content form input[type="text"],.login_content form input[type="email"],.login_content form input[type="password"]{border-radius:3px;-webkit-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset;-ms-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset;-o-box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset;box-shadow:0 1px 0 #fff,0 -2px 5px rgba(0,0,0,0.08) inset;border:1px solid #c8c8c8;color:#777;margin:0 0 20px;width:100%}.login_content form input[type="text"]:focus,.login_content form input[type="email"]:focus,.login_content form input[type="password"]:focus{-webkit-box-shadow:0 0 2px #AA77B4 inset;-ms-box-shadow:0 0 2px #ed1c24 inset;-o-box-shadow:0 0 2px #ed1c24 inset;box-shadow:0 0 2px #A97AAD inset;background-color:#fff;border:1px solid #A878AF;outline:none}#username{background-position:10px 10px !important}#password{background-position:10px -53px !important}.login_content form div a{font-size:12px;margin:10px 15px 0 0}.reset_pass{margin-top:10px !important}.login_content div .reset_pass{margin-top:13px !important;margin-right:39px;float:right}.separator{border-top:1px solid #D8D8D8;margin-top:10px;padding-top:10px}.button{background:#f7f9fa;background:-webkit-gradient(linear, left top, left bottom, from(#f7f9fa), to(#f0f0f0));background:linear-gradient(to bottom, #f7f9fa 0%, #f0f0f0 100%);filter:"progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0)";-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;-ms-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;-o-box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;border-radius:0 0 5px 5px;border-top:1px solid #CFD5D9;padding:15px 0}.login_content form input[type="submit"],#content form .submit{float:left;margin-left:38px}.button a{background:url(http://cssdeck.com/uploads/media/items/8/8bcLQqF.png) 0 -112px no-repeat;color:#7E7E7E;font-size:17px;padding:2px 0 2px 40px;text-decoration:none;-webkit-transition:all 0.3s ease;transition:all 0.3s ease}.button a:hover{background-position:0 -135px;color:#00aeef}header{width:100%}#nprogress .bar{background:#1ABB9C}#nprogress .peg{-webkit-box-shadow:0 0 10px #1ABB9C, 0 0 5px #1ABB9C;box-shadow:0 0 10px #1ABB9C, 0 0 5px #1ABB9C}#nprogress .spinner-icon{border-top-color:#1ABB9C;border-left-color:#1ABB9C}.editor-wrapper{min-height:250px;background-color:white;border-collapse:separate;border:1px solid #ccc;padding:4px;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-box-shadow:rgba(0,0,0,0.0745098) 0px 1px 1px 0px inset;box-shadow:rgba(0,0,0,0.0745098) 0px 1px 1px 0px inset;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;border-top-left-radius:3px;overflow:scroll;outline:none}.voiceBtn{width:20px;color:transparent;background-color:transparent;transform:scale(2, 2);-webkit-transform:scale(2, 2);-moz-transform:scale(2, 2);border:transparent;cursor:pointer;box-shadow:none;-webkit-box-shadow:none}div[data-role="editor-toolbar"]{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.dropdown-menu a{cursor:pointer}.select2-container--default .select2-selection--single,.select2-container--default .select2-selection--multiple{background-color:#fff;border:1px solid #ccc;border-radius:0;min-height:38px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#73879C;padding-top:5px}.select2-container--default .select2-selection--multiple .select2-selection__rendered{padding-top:3px}.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px}.select2-container--default .select2-selection--multiple .select2-selection__choice,.select2-container--default .select2-selection--multiple .select2-selection__clear{margin-top:2px;border:none;border-radius:0;padding:3px 5px}.select2-container--default.select2-container--focus .select2-selection--multiple{border:1px solid #ccc}.switchery{width:32px;height:20px}.switchery>small{width:20px;height:20px}fieldset{border:none;margin:0;padding:0}.cropper .img-container,.cropper .img-preview{background-color:#f7f7f7;width:100%;text-align:center}.cropper .img-container{min-height:200px;max-height:516px;margin-bottom:20px}@media (min-width: 768px){.cropper .img-container{min-height:516px}}.cropper .img-container>img{max-width:100%}.cropper .docs-preview{margin-right:-15px}.cropper .img-preview{float:left;margin-right:10px;margin-bottom:10px;overflow:hidden}.cropper .img-preview>img{max-width:100%}.cropper .preview-lg{width:263px;height:148px}.cropper .preview-md{width:139px;height:78px}.cropper .preview-sm{width:69px;height:39px}.cropper .preview-xs{width:35px;height:20px;margin-right:0}.cropper .docs-data>.input-group{margin-bottom:10px}.cropper .docs-data>.input-group>label{min-width:80px}.cropper .docs-data>.input-group>span{min-width:50px}.cropper .docs-buttons>.btn,.cropper .docs-buttons>.btn-group,.cropper .docs-buttons>.form-control{margin-right:5px;margin-bottom:10px}.cropper .docs-toggles>.btn,.cropper .docs-toggles>.btn-group,.cropper .docs-toggles>.dropdown{margin-bottom:10px}.cropper .docs-tooltip{display:block;margin:-6px -12px;padding:6px 12px}.cropper .docs-tooltip>.icon{margin:0 -3px;vertical-align:top}.cropper .tooltip-inner{white-space:normal}.cropper .btn-upload .tooltip-inner,.cropper .btn-toggle .tooltip-inner{white-space:nowrap}.cropper .btn-toggle{padding:6px}.cropper .btn-toggle>.docs-tooltip{margin:-6px;padding:6px}.label-align{text-align:right}@media (max-width: 414px){.item{display:block}.label-align{text-align:left}}@media (max-width: 400px){.cropper .btn-group-crop{margin-right:-15px !important}.item{display:block}.label-align{text-align:left}.cropper .btn-group-crop>.btn{padding-left:5px;padding-right:5px}.cropper .btn-group-crop .docs-tooltip{margin-left:-5px;margin-right:-5px;padding-left:5px;padding-right:5px}}.cropper .docs-options .dropdown-menu{width:100%}.cropper .docs-options .dropdown-menu>li{padding:3px 20px}.cropper .docs-options .dropdown-menu>li:hover{background-color:#f7f7f7}.cropper .docs-options .dropdown-menu>li>label{display:block}.cropper .docs-cropped .modal-body{text-align:center}.cropper .docs-cropped .modal-body>img,.cropper .docs-cropped .modal-body>canvas{max-width:100%}.cropper .docs-diagram .modal-dialog{max-width:352px}.cropper .docs-cropped canvas{max-width:100%}.form_wizard .stepContainer{display:block;position:relative;margin:0;padding:0;border:0 solid #CCC;overflow-x:hidden}.wizard_horizontal ul.wizard_steps{display:table;list-style:none;position:relative;width:100%;margin:0 0 20px}.wizard_horizontal ul.wizard_steps li{display:table-cell;text-align:center}.wizard_horizontal ul.wizard_steps li a,.wizard_horizontal ul.wizard_steps li:hover{display:block;position:relative;-moz-opacity:1;filter:alpha(opacity=100);opacity:1;color:#666}.wizard_horizontal ul.wizard_steps li a:before{content:"";position:absolute;height:4px;background:#ccc;top:20px;width:100%;z-index:4;left:0}.wizard_horizontal ul.wizard_steps li a.disabled .step_no{background:#ccc}.wizard_horizontal ul.wizard_steps li a .step_no{width:40px;height:40px;line-height:40px;border-radius:100px;display:block;margin:0 auto 5px;font-size:16px;text-align:center;position:relative;z-index:5}.wizard_horizontal ul.wizard_steps li a.selected:before,.step_no{background:#34495E;color:#fff}.wizard_horizontal ul.wizard_steps li a.done:before,.wizard_horizontal ul.wizard_steps li a.done .step_no{background:#1ABB9C;color:#fff}.wizard_horizontal ul.wizard_steps li:first-child a:before{left:50%}.wizard_horizontal ul.wizard_steps li:last-child a:before{right:50%;width:50%;left:auto}.wizard_verticle .stepContainer{width:80%;float:left;padding:0 10px}.actionBar{width:100%;border-top:1px solid #ddd;padding:10px 5px;text-align:right;margin-top:10px}.actionBar .buttonDisabled{cursor:not-allowed;pointer-events:none;opacity:.65;filter:alpha(opacity=65);-webkit-box-shadow:none;box-shadow:none}.actionBar a{margin:0 3px}.wizard_verticle .wizard_content{width:80%;float:left;padding-left:20px}.wizard_verticle ul.wizard_steps{display:table;list-style:none;position:relative;width:20%;float:left;margin:0 0 20px}.wizard_verticle ul.wizard_steps li{display:list-item;text-align:center}.wizard_verticle ul.wizard_steps li a{height:80px}.wizard_verticle ul.wizard_steps li a:first-child{margin-top:20px}.wizard_verticle ul.wizard_steps li a,.wizard_verticle ul.wizard_steps li:hover{display:block;position:relative;-moz-opacity:1;filter:alpha(opacity=100);opacity:1;color:#666}.wizard_verticle ul.wizard_steps li a:before{content:"";position:absolute;height:100%;background:#ccc;top:20px;width:4px;z-index:4;left:49%}.wizard_verticle ul.wizard_steps li a.disabled .step_no{background:#ccc}.wizard_verticle ul.wizard_steps li a .step_no{width:40px;height:40px;line-height:40px;border-radius:100px;display:block;margin:0 auto 5px;font-size:16px;text-align:center;position:relative;z-index:5}.wizard_verticle ul.wizard_steps li a.selected:before,.step_no{background:#34495E;color:#fff}.wizard_verticle ul.wizard_steps li a.done:before,.wizard_verticle ul.wizard_steps li a.done .step_no{background:#1ABB9C;color:#fff}.wizard_verticle ul.wizard_steps li:first-child a:before{left:49%}.wizard_verticle ul.wizard_steps li:last-child a:before{left:49%;left:auto;width:0}.form_wizard .loader{display:none}.form_wizard .msgBox{display:none}.progress{border-radius:0}.progress-bar-info{background-color:#3498DB}.progress-bar-success{background-color:#26B99A}.progress_summary .progress{margin:5px 0 12px !important}.progress_summary .row{margin-bottom:5px}.progress_summary .row .col-xs-2{padding:0}.progress_summary .more_info span{text-align:right;float:right}.progress_summary .data span{text-align:right;float:right}.progress_summary p{margin-bottom:3px;width:100%}.progress_title .left{float:left;text-align:left}.progress_title .right{float:right;text-align:right;font-weight:300}.progress.progress_sm{border-radius:0;margin-bottom:18px;height:10px !important}.progress.progress_sm .progress-bar{height:10px !important}.dashboard_graph p{margin:0 0 4px}ul.verticle_bars{width:100%}ul.verticle_bars li{width:23%;height:200px;margin:0}.progress.vertical.progress_wide{width:35px}.alert-success{color:#ffffff;background-color:rgba(38,185,154,0.88);border-color:rgba(38,185,154,0.88)}.alert-info{color:#E9EDEF;background-color:rgba(52,152,219,0.88);border-color:rgba(52,152,219,0.88)}.alert-warning{color:#E9EDEF;background-color:rgba(243,156,18,0.88);border-color:rgba(243,156,18,0.88)}.alert-danger,.alert-error{color:#E9EDEF;background-color:rgba(231,76,60,0.88);border-color:rgba(231,76,60,0.88)}.ui-pnotify.dark .ui-pnotify-container{color:#E9EDEF;background-color:rgba(52,73,94,0.88);border-color:rgba(52,73,94,0.88)}.custom-notifications{position:fixed;margin:15px;right:0;float:right;width:400px;z-index:4000;bottom:0}ul.notifications{float:right;display:block;margin-bottom:7px;padding:0;width:100%}.notifications li{float:right;margin:3px;width:36px;-webkit-box-shadow:3px 3px 3px rgba(0,0,0,0.3);box-shadow:3px 3px 3px rgba(0,0,0,0.3)}.notifications li:last-child{margin-left:0}.notifications a{display:block;text-align:center;text-decoration:none;text-transform:uppercase;padding:9px 8px}.tabbed_notifications .text{padding:5px 15px;height:140px;border-radius:7px;-webkit-box-shadow:6px 6px 6px rgba(0,0,0,0.3);box-shadow:6px 6px 6px rgba(0,0,0,0.3)}.tabbed_notifications div p{display:inline-block}.tabbed_notifications h2{font-weight:bold;text-transform:uppercase;width:80%;float:left;height:20px;text-overflow:ellipsis;overflow:hidden;display:block}.tabbed_notifications .close{padding:5px;color:#E9EDEF;float:right;opacity:1}.join-btn{position:absolute;clip:rect(0, 0, 0, 0);pointer-events:none}.go-class{margin-right:0px}.input-group-sm>.input-group-addon{height:30px;padding:5px 10px;font-size:12px;line-height:1.5}.input-group-addon{padding:6px 12px;font-size:14px;font-weight:400;line-height:1;color:#555;text-align:center;background-color:#eee;border:1px solid #ccc}.img-circle{border-radius:50%}.display-layout{display:-webkit-box;display:-ms-flexbox;display:flex}.profile-bottom{background:#F2F5F7;padding:9px 0;border-top:1px solid #E6E9ED}@media (min-width: 360px) and (max-width: 812px){.info-number .badge{font-size:10px;font-weight:normal;line-height:13px;padding:2px 6px;position:absolute;right:0px;top:-7px}.tile,.graph{zoom:71%;height:inherit}}@media (min-width: 768px) and (max-width: 1024px){.info-number .badge{font-size:10px;font-weight:normal;line-height:13px;padding:2px 6px;position:absolute;right:-2px;top:-6px}}.fc-state-default{background:#f5f5f5;color:#73879C}.fc-state-down,.fc-state-active{color:#333;background:#ccc}.dropzone{min-height:300px;border:1px solid #e5e5e5}
 
 .daterangepicker .ranges li{color:#73879C}.daterangepicker .ranges li.active,.daterangepicker .ranges li:hover{background:#536A7F;border:1px solid #536A7F;color:#fff}.daterangepicker .input-mini{background-color:#eee;border:1px solid #ccc;-webkit-box-shadow:none !important;box-shadow:none !important}.daterangepicker .input-mini.active{border:1px solid #ccc}.daterangepicker select.monthselect,.daterangepicker select.yearselect,.daterangepicker select.hourselect,.daterangepicker select.minuteselect,.daterangepicker select.secondselect,.daterangepicker select.ampmselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default;height:30px;border:1px solid #ADB2B5;line-height:30px;border-radius:0px !important}.daterangepicker select.monthselect{margin-right:2%}.daterangepicker td.in-range{background:#E4E7EA;color:#73879C}.daterangepicker td.active,.daterangepicker td.active:hover{background-color:#536A7F;color:#fff}.daterangepicker th.available:hover{background:#eee;color:#34495E}.daterangepicker:before,.daterangepicker:after{content:none}.daterangepicker .calendar.single{margin:0 0 4px 0}.daterangepicker .calendar.single .calendar-table{width:224px;padding:0 0 4px 0 !important}.daterangepicker .calendar.single .calendar-table thead tr:first-child th{padding:8px 5px}.daterangepicker .calendar.single .calendar-table thead th{border-radius:0}.daterangepicker.picker_1{color:#fff;background:#34495E}.daterangepicker.picker_1 .calendar-table{background:#34495E}.daterangepicker.picker_1 .calendar-table thead tr{background:#213345}.daterangepicker.picker_1 .calendar-table thead tr:first-child{background:#1ABB9C}.daterangepicker.picker_1 .calendar-table td.off{background:#34495E;color:#999}.daterangepicker.picker_1 .calendar-table td.available:hover{color:#34495E}.daterangepicker.picker_2 .calendar-table thead tr{color:#1ABB9C}.daterangepicker.picker_2 .calendar-table thead tr:first-child{color:#73879C}.daterangepicker.picker_3 .calendar-table thead tr:first-child{color:#fff;background:#1ABB9C}.daterangepicker.picker_4 .calendar-table thead tr:first-child{color:#fff;background:#34495E}.daterangepicker.picker_4 .calendar-table td,.daterangepicker.picker_4 .calendar-table td.off{background:#ECF0F1;border:1px solid #fff;border-radius:0}.daterangepicker.picker_4 .calendar-table td.active{background:#34495E}.calendar-exibit .show-calendar{float:none;display:block;position:relative;background-color:#fff;border:1px solid #ccc;margin-bottom:20px;border:1px solid rgba(0,0,0,0.15);overflow:hidden}.calendar-exibit .show-calendar .calendar{margin:0 0 4px 0}.calendar-exibit .show-calendar.picker_1{background:#34495E}.calendar-exibit .calendar-table{padding:0 0 4px 0}
+
+#slash{
+	display: none;
+}
\ No newline at end of file

production/form_validation.html

@@ -2,461 +2,470 @@
 <html lang="en">
 
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
-  <!-- Meta, title, CSS, favicons, etc. -->
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+    <!-- Meta, title, CSS, favicons, etc. -->
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
 
-  <title>Gentelella Alela! | </title>
+    <title>Gentelella Alela! | </title>
 
-  <!-- Bootstrap -->
-  <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
-  <!-- Font Awesome -->
-  <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
-  <!-- NProgress -->
-  <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
+    <!-- Bootstrap -->
+    <link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
+    <!-- NProgress -->
+    <link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
 
-  <!-- Custom Theme Style -->
-  <link href="../build/css/custom.min.css" rel="stylesheet">
+    <!-- Custom Theme Style -->
+    <link href="../build/css/custom.min.css" rel="stylesheet">
 </head>
 
 <body class="nav-md">
-  <div class="container body">
-    <div class="main_container">
-      <div class="col-md-3 left_col">
-        <div class="left_col scroll-view">
-          <div class="navbar nav_title" style="border: 0;">
-            <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
-          </div>
+    <div class="container body">
+        <div class="main_container">
+            <div class="col-md-3 left_col">
+                <div class="left_col scroll-view">
+                    <div class="navbar nav_title" style="border: 0;">
+                        <a href="index.html" class="site_title"><i class="fa fa-paw"></i> <span>Gentelella Alela!</span></a>
+                    </div>
 
-          <div class="clearfix"></div>
+                    <div class="clearfix"></div>
 
-          <!-- menu profile quick info -->
-          <div class="profile clearfix">
-            <div class="profile_pic">
-              <img src="images/img.jpg" alt="..." class="img-circle profile_img">
-            </div>
-            <div class="profile_info">
-              <span>Welcome,</span>
-              <h2>John Doe</h2>
-            </div>
-          </div>
-          <!-- /menu profile quick info -->
-
-          <br />
+                    <!-- menu profile quick info -->
+                    <div class="profile clearfix">
+                        <div class="profile_pic">
+                            <img src="images/img.jpg" alt="..." class="img-circle profile_img">
+                        </div>
+                        <div class="profile_info">
+                            <span>Welcome,</span>
+                            <h2>John Doe</h2>
+                        </div>
+                    </div>
+                    <!-- /menu profile quick info -->
 
-          <!-- sidebar menu -->
-          <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
-            <div class="menu_section">
-              <h3>General</h3>
-              <ul class="nav side-menu">
-                <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="index.html">Dashboard</a></li>
-                    <li><a href="index2.html">Dashboard2</a></li>
-                    <li><a href="index3.html">Dashboard3</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="form.html">General Form</a></li>
-                    <li><a href="form_advanced.html">Advanced Components</a></li>
-                    <li><a href="form_validation.html">Form Validation</a></li>
-                    <li><a href="form_wizards.html">Form Wizard</a></li>
-                    <li><a href="form_upload.html">Form Upload</a></li>
-                    <li><a href="form_buttons.html">Form Buttons</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="general_elements.html">General Elements</a></li>
-                    <li><a href="media_gallery.html">Media Gallery</a></li>
-                    <li><a href="typography.html">Typography</a></li>
-                    <li><a href="icons.html">Icons</a></li>
-                    <li><a href="glyphicons.html">Glyphicons</a></li>
-                    <li><a href="widgets.html">Widgets</a></li>
-                    <li><a href="invoice.html">Invoice</a></li>
-                    <li><a href="inbox.html">Inbox</a></li>
-                    <li><a href="calendar.html">Calendar</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="tables.html">Tables</a></li>
-                    <li><a href="tables_dynamic.html">Table Dynamic</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="chartjs.html">Chart JS</a></li>
-                    <li><a href="chartjs2.html">Chart JS2</a></li>
-                    <li><a href="morisjs.html">Moris JS</a></li>
-                    <li><a href="echarts.html">ECharts</a></li>
-                    <li><a href="other_charts.html">Other Charts</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
-                    <li><a href="fixed_footer.html">Fixed Footer</a></li>
-                  </ul>
-                </li>
-              </ul>
-            </div>
-            <div class="menu_section">
-              <h3>Live On</h3>
-              <ul class="nav side-menu">
-                <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="e_commerce.html">E-commerce</a></li>
-                    <li><a href="projects.html">Projects</a></li>
-                    <li><a href="project_detail.html">Project Detail</a></li>
-                    <li><a href="contacts.html">Contacts</a></li>
-                    <li><a href="profile.html">Profile</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="page_403.html">403 Error</a></li>
-                    <li><a href="page_404.html">404 Error</a></li>
-                    <li><a href="page_500.html">500 Error</a></li>
-                    <li><a href="plain_page.html">Plain Page</a></li>
-                    <li><a href="login.html">Login Page</a></li>
-                    <li><a href="pricing_tables.html">Pricing Tables</a></li>
-                  </ul>
-                </li>
-                <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
-                  <ul class="nav child_menu">
-                    <li><a href="#level1_1">Level One</a>
-                    <li><a>Level One<span class="fa fa-chevron-down"></span></a>
-                      <ul class="nav child_menu">
-                        <li class="sub_menu"><a href="level2.html">Level Two</a>
-                        </li>
-                        <li><a href="#level2_1">Level Two</a>
-                        </li>
-                        <li><a href="#level2_2">Level Two</a>
-                        </li>
-                      </ul>
-                    </li>
-                    <li><a href="#level1_2">Level One</a>
-                    </li>
-                  </ul>
-                </li>
-                <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span
-                      class="label label-success pull-right">Coming Soon</span></a></li>
-              </ul>
-            </div>
+                    <br />
 
-          </div>
-          <!-- /sidebar menu -->
+                    <!-- sidebar menu -->
+                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
+                        <div class="menu_section">
+                            <h3>General</h3>
+                            <ul class="nav side-menu">
+                                <li><a><i class="fa fa-home"></i> Home <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="index.html">Dashboard</a></li>
+                                        <li><a href="index2.html">Dashboard2</a></li>
+                                        <li><a href="index3.html">Dashboard3</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-edit"></i> Forms <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="form.html">General Form</a></li>
+                                        <li><a href="form_advanced.html">Advanced Components</a></li>
+                                        <li><a href="form_validation.html">Form Validation</a></li>
+                                        <li><a href="form_wizards.html">Form Wizard</a></li>
+                                        <li><a href="form_upload.html">Form Upload</a></li>
+                                        <li><a href="form_buttons.html">Form Buttons</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-desktop"></i> UI Elements <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="general_elements.html">General Elements</a></li>
+                                        <li><a href="media_gallery.html">Media Gallery</a></li>
+                                        <li><a href="typography.html">Typography</a></li>
+                                        <li><a href="icons.html">Icons</a></li>
+                                        <li><a href="glyphicons.html">Glyphicons</a></li>
+                                        <li><a href="widgets.html">Widgets</a></li>
+                                        <li><a href="invoice.html">Invoice</a></li>
+                                        <li><a href="inbox.html">Inbox</a></li>
+                                        <li><a href="calendar.html">Calendar</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-table"></i> Tables <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="tables.html">Tables</a></li>
+                                        <li><a href="tables_dynamic.html">Table Dynamic</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-bar-chart-o"></i> Data Presentation <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="chartjs.html">Chart JS</a></li>
+                                        <li><a href="chartjs2.html">Chart JS2</a></li>
+                                        <li><a href="morisjs.html">Moris JS</a></li>
+                                        <li><a href="echarts.html">ECharts</a></li>
+                                        <li><a href="other_charts.html">Other Charts</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-clone"></i>Layouts <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="fixed_sidebar.html">Fixed Sidebar</a></li>
+                                        <li><a href="fixed_footer.html">Fixed Footer</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </div>
+                        <div class="menu_section">
+                            <h3>Live On</h3>
+                            <ul class="nav side-menu">
+                                <li><a><i class="fa fa-bug"></i> Additional Pages <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="e_commerce.html">E-commerce</a></li>
+                                        <li><a href="projects.html">Projects</a></li>
+                                        <li><a href="project_detail.html">Project Detail</a></li>
+                                        <li><a href="contacts.html">Contacts</a></li>
+                                        <li><a href="profile.html">Profile</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-windows"></i> Extras <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="page_403.html">403 Error</a></li>
+                                        <li><a href="page_404.html">404 Error</a></li>
+                                        <li><a href="page_500.html">500 Error</a></li>
+                                        <li><a href="plain_page.html">Plain Page</a></li>
+                                        <li><a href="login.html">Login Page</a></li>
+                                        <li><a href="pricing_tables.html">Pricing Tables</a></li>
+                                    </ul>
+                                </li>
+                                <li><a><i class="fa fa-sitemap"></i> Multilevel Menu <span class="fa fa-chevron-down"></span></a>
+                                    <ul class="nav child_menu">
+                                        <li><a href="#level1_1">Level One</a>
+                                        <li><a>Level One<span class="fa fa-chevron-down"></span></a>
+                                            <ul class="nav child_menu">
+                                                <li class="sub_menu"><a href="level2.html">Level Two</a>
+                                                </li>
+                                                <li><a href="#level2_1">Level Two</a>
+                                                </li>
+                                                <li><a href="#level2_2">Level Two</a>
+                                                </li>
+                                            </ul>
+                                        </li>
+                                        <li><a href="#level1_2">Level One</a>
+                                        </li>
+                                    </ul>
+                                </li>
+                                <li><a href="javascript:void(0)"><i class="fa fa-laptop"></i> Landing Page <span class="label label-success pull-right">Coming Soon</span></a></li>
+                            </ul>
+                        </div>
 
-          <!-- /menu footer buttons -->
-          <div class="sidebar-footer hidden-small">
-            <a data-toggle="tooltip" data-placement="top" title="Settings">
-              <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
-            </a>
-            <a data-toggle="tooltip" data-placement="top" title="FullScreen">
-              <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
-            </a>
-            <a data-toggle="tooltip" data-placement="top" title="Lock">
-              <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
-            </a>
-            <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
-              <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
-            </a>
-          </div>
-          <!-- /menu footer buttons -->
-        </div>
-      </div>
+                    </div>
+                    <!-- /sidebar menu -->
 
-      <!-- top navigation -->
-      <div class="top_nav">
-        <div class="nav_menu">
-          <div class="nav toggle">
-            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
-          </div>
-          <nav class="nav navbar-nav">
-            <ul class=" navbar-right">
-              <li class="nav-item dropdown open" style="padding-left: 15px;">
-                <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown"
-                  data-toggle="dropdown" aria-expanded="false">
-                  <img src="images/img.jpg" alt="">John Doe
-                </a>
-                <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
-                  <a class="dropdown-item" href="javascript:;"> Profile</a>
-                  <a class="dropdown-item" href="javascript:;">
-                    <span class="badge bg-red pull-right">50%</span>
-                    <span>Settings</span>
-                  </a>
-                  <a class="dropdown-item" href="javascript:;">Help</a>
-                  <a class="dropdown-item" href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
+                    <!-- /menu footer buttons -->
+                    <div class="sidebar-footer hidden-small">
+                        <a data-toggle="tooltip" data-placement="top" title="Settings">
+                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+                        </a>
+                        <a data-toggle="tooltip" data-placement="top" title="FullScreen">
+                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
+                        </a>
+                        <a data-toggle="tooltip" data-placement="top" title="Lock">
+                            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
+                        </a>
+                        <a data-toggle="tooltip" data-placement="top" title="Logout" href="login.html">
+                            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
+                        </a>
+                    </div>
+                    <!-- /menu footer buttons -->
                 </div>
-              </li>
+            </div>
 
-              <li role="presentation" class="nav-item dropdown open">
-                <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown"
-                  aria-expanded="false">
-                  <i class="fa fa-envelope-o"></i>
-                  <span class="badge bg-green">6</span>
-                </a>
-                <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
-                  <li class="nav-item">
-                    <a class="dropdown-item">
-                      <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                      <span>
-                        <span>John Smith</span>
-                        <span class="time">3 mins ago</span>
-                      </span>
-                      <span class="message">
-                        Film festivals used to be do-or-die moments for movie makers. They were where...
-                      </span>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="dropdown-item">
-                      <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                      <span>
-                        <span>John Smith</span>
-                        <span class="time">3 mins ago</span>
-                      </span>
-                      <span class="message">
-                        Film festivals used to be do-or-die moments for movie makers. They were where...
-                      </span>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="dropdown-item">
-                      <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                      <span>
-                        <span>John Smith</span>
-                        <span class="time">3 mins ago</span>
-                      </span>
-                      <span class="message">
-                        Film festivals used to be do-or-die moments for movie makers. They were where...
-                      </span>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="dropdown-item">
-                      <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
-                      <span>
-                        <span>John Smith</span>
-                        <span class="time">3 mins ago</span>
-                      </span>
-                      <span class="message">
-                        Film festivals used to be do-or-die moments for movie makers. They were where...
-                      </span>
-                    </a>
-                  </li>
-                  <li class="nav-item">
-                    <div class="text-center">
-                      <a class="dropdown-item">
-                        <strong>See All Alerts</strong>
-                        <i class="fa fa-angle-right"></i>
-                      </a>
+            <!-- top navigation -->
+            <div class="top_nav">
+                <div class="nav_menu">
+                    <div class="nav toggle">
+                        <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                     </div>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </nav>
-        </div>
-      </div>
-      <!-- /top navigation -->
-
-      <!-- page content -->
-      <div class="right_col" role="main">
-        <div class="">
-          <div class="page-title">
-            <div class="title_left">
-              <h3>Form Validation</h3>
-            </div>
+                    <nav class="nav navbar-nav">
+                        <ul class=" navbar-right">
+                            <li class="nav-item dropdown open" style="padding-left: 15px;">
+                                <a href="javascript:;" class="user-profile dropdown-toggle" aria-haspopup="true" id="navbarDropdown" data-toggle="dropdown" aria-expanded="false">
+                                    <img src="images/img.jpg" alt="">John Doe
+                                </a>
+                                <div class="dropdown-menu dropdown-usermenu pull-right" aria-labelledby="navbarDropdown">
+                                    <a class="dropdown-item" href="javascript:;"> Profile</a>
+                                    <a class="dropdown-item" href="javascript:;">
+                                        <span class="badge bg-red pull-right">50%</span>
+                                        <span>Settings</span>
+                                    </a>
+                                    <a class="dropdown-item" href="javascript:;">Help</a>
+                                    <a class="dropdown-item" href="login.html"><i class="fa fa-sign-out pull-right"></i> Log Out</a>
+                                </div>
+                            </li>
 
-            <div class="title_right">
-              <div class="col-md-5 col-sm-5 form-group pull-right top_search">
-                <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">Go!</button>
-                  </span>
+                            <li role="presentation" class="nav-item dropdown open">
+                                <a href="javascript:;" class="dropdown-toggle info-number" id="navbarDropdown1" data-toggle="dropdown" aria-expanded="false">
+                                    <i class="fa fa-envelope-o"></i>
+                                    <span class="badge bg-green">6</span>
+                                </a>
+                                <ul class="dropdown-menu list-unstyled msg_list" role="menu" aria-labelledby="navbarDropdown1">
+                                    <li class="nav-item">
+                                        <a class="dropdown-item">
+                                            <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
+                                            <span>
+                                                <span>John Smith</span>
+                                                <span class="time">3 mins ago</span>
+                                            </span>
+                                            <span class="message">
+                                                Film festivals used to be do-or-die moments for movie makers. They were where...
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="dropdown-item">
+                                            <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
+                                            <span>
+                                                <span>John Smith</span>
+                                                <span class="time">3 mins ago</span>
+                                            </span>
+                                            <span class="message">
+                                                Film festivals used to be do-or-die moments for movie makers. They were where...
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="dropdown-item">
+                                            <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
+                                            <span>
+                                                <span>John Smith</span>
+                                                <span class="time">3 mins ago</span>
+                                            </span>
+                                            <span class="message">
+                                                Film festivals used to be do-or-die moments for movie makers. They were where...
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <a class="dropdown-item">
+                                            <span class="image"><img src="images/img.jpg" alt="Profile Image" /></span>
+                                            <span>
+                                                <span>John Smith</span>
+                                                <span class="time">3 mins ago</span>
+                                            </span>
+                                            <span class="message">
+                                                Film festivals used to be do-or-die moments for movie makers. They were where...
+                                            </span>
+                                        </a>
+                                    </li>
+                                    <li class="nav-item">
+                                        <div class="text-center">
+                                            <a class="dropdown-item">
+                                                <strong>See All Alerts</strong>
+                                                <i class="fa fa-angle-right"></i>
+                                            </a>
+                                        </div>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </nav>
                 </div>
-              </div>
             </div>
-          </div>
-          <div class="clearfix"></div>
+            <!-- /top navigation -->
 
-          <div class="row">
-            <div class="col-md-12 col-sm-12">
-              <div class="x_panel">
-                <div class="x_title">
-                  <h2>Form validation <small>sub title</small></h2>
-                  <ul class="nav navbar-right panel_toolbox">
-                    <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
-                    </li>
-                    <li class="dropdown">
-                      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
-                          class="fa fa-wrench"></i></a>
-                      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
-                        <a class="dropdown-item" href="#">Settings 1</a>
-                        <a class="dropdown-item" href="#">Settings 2</a>
-                      </div>
-                    </li>
-                    <li><a class="close-link"><i class="fa fa-close"></i></a>
-                    </li>
-                  </ul>
-                  <div class="clearfix"></div>
-                </div>
-                <div class="x_content">
-                  <form class="" action="" method="post" novalidate>
-                    <p>For alternative validation library <code>parsleyJS</code> check out in the <a
-                        href="form.html">form page</a>
-                    </p>
-                    <span class="section">Personal Info</span>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Name<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name"
-                          placeholder="ex. John f. Kennedy" required="required" />
-                      </div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Occupation<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15"
-                          type="text" /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">email<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" name="email" class='email' required="required" type="email" /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Confirm email address<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" type="email" class='email' name="confirm_email"
-                          data-validate-linked='email' required='required' /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Number <span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" type="number" class='number' name="number"
-                          data-validate-minmax="10,100" required='required'></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Date<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" class='date' type="date" name="date" required='required'></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Time<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" class='time' type="time" name="time" required='required'></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Password<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" type="password" name="password" data-validate-length="6,8"
-                          required='required' /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Repeat password<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" type="password" name="password2" data-validate-linked='password'
-                          required='required' /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">Telephone<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <input class="form-control" type="tel" class='tel' name="phone" required='required'
-                          data-validate-length-range="8,20" /></div>
-                    </div>
-                    <div class="field item form-group">
-                      <label class="col-form-label col-md-3 col-sm-3  label-align">message<span
-                          class="required">*</span></label>
-                      <div class="col-md-6 col-sm-6">
-                        <textarea required="required" name='message'></textarea></div>
+            <!-- page content -->
+            <div class="right_col" role="main">
+                <div class="">
+                    <div class="page-title">
+                        <div class="title_left">
+                            <h3>Form Validation</h3>
+                        </div>
+
+                        <div class="title_right">
+                            <div class="col-md-5 col-sm-5 form-group pull-right top_search">
+                                <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">Go!</button>
+                                    </span>
+                                </div>
+                            </div>
+                        </div>
                     </div>
-                    <div class="ln_solid">
-                      <div class="form-group">
-                        <div class="col-md-6 offset-md-3">
-                    <button type='submit' class="btn btn-primary">Submit</button>
-                    <button type='reset' class="btn btn-success">Reset</button>
+                    <div class="clearfix"></div>
+
+                    <div class="row">
+                        <div class="col-md-12 col-sm-12">
+                            <div class="x_panel">
+                                <div class="x_title">
+                                    <h2>Form validation <small>sub title</small></h2>
+                                    <ul class="nav navbar-right panel_toolbox">
+                                        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
+                                        </li>
+                                        <li class="dropdown">
+                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
+                                            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                                                <a class="dropdown-item" href="#">Settings 1</a>
+                                                <a class="dropdown-item" href="#">Settings 2</a>
+                                            </div>
+                                        </li>
+                                        <li><a class="close-link"><i class="fa fa-close"></i></a>
+                                        </li>
+                                    </ul>
+                                    <div class="clearfix"></div>
+                                </div>
+                                <div class="x_content">
+                                    <form class="" action="" method="post" novalidate>
+                                        <p>For alternative validation library <code>parsleyJS</code> check out in the <a href="form.html">form page</a>
+                                        </p>
+                                        <span class="section">Personal Info</span>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Name<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" data-validate-length-range="6" data-validate-words="2" name="name" placeholder="ex. John f. Kennedy" required="required" />
+                                            </div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Occupation<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" class='optional' name="occupation" data-validate-length-range="5,15" type="text" /></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">email<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" name="email" class='email' required="required" type="email" /></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Confirm email address<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" type="email" class='email' name="confirm_email" data-validate-linked='email' required='required' /></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Number <span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" type="number" class='number' name="number" data-validate-minmax="10,100" required='required'></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Date<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" class='date' type="date" name="date" required='required'></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Time<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" class='time' type="time" name="time" required='required'></div>
+                                        </div>
+                                        
+                                        <div class="field item form-group">
+											<label class="col-form-label col-md-3 col-sm-3  label-align">Password<span class="required">*</span></label>
+											<div class="col-md-6 col-sm-6">
+												<input class="form-control" type="password" id="password1" name="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,}" title="Minimum 8 Characters Including An Upper And Lower Case Letter, A Number And A Unique Character" required />
+												
+												<span style="position: absolute;right:15px;top:7px;" onclick="hideshow()" >
+													<i id="slash" class="fa fa-eye-slash"></i>
+													<i id="eye" class="fa fa-eye"></i>
+												</span>
+											</div>
+										</div>
+                                        
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Repeat password<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" type="password" name="password2" data-validate-linked='password' required='required' /></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">Telephone<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <input class="form-control" type="tel" class='tel' name="phone" required='required' data-validate-length-range="8,20" /></div>
+                                        </div>
+                                        <div class="field item form-group">
+                                            <label class="col-form-label col-md-3 col-sm-3  label-align">message<span class="required">*</span></label>
+                                            <div class="col-md-6 col-sm-6">
+                                                <textarea required="required" name='message'></textarea></div>
+                                        </div>
+                                        <div class="ln_solid">
+                                            <div class="form-group">
+                                                <div class="col-md-6 offset-md-3">
+                                                    <button type='submit' class="btn btn-primary">Submit</button>
+                                                    <button type='reset' class="btn btn-success">Reset</button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </form>
+                                </div>
+                            </div>
                         </div>
-                      </div>
                     </div>
-                  </form>
                 </div>
-              </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <!-- /page content -->
+            <!-- /page content -->
 
-      <!-- footer content -->
-      <footer>
-        <div class="pull-right">
-          Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
+            <!-- footer content -->
+            <footer>
+                <div class="pull-right">
+                    Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
+                </div>
+                <div class="clearfix"></div>
+            </footer>
+            <!-- /footer content -->
         </div>
-        <div class="clearfix"></div>
-      </footer>
-      <!-- /footer content -->
     </div>
-  </div>
 
 
-  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
-  <script src="../vendors/validator/multifield.js"></script>
-  <script src="../vendors/validator/validator.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+    <script src="../vendors/validator/multifield.js"></script>
+    <script src="../vendors/validator/validator.js"></script>
+    
+    <!-- Javascript functions	-->
+	<script>
+		function hideshow(){
+			var password = document.getElementById("password1");
+			var slash = document.getElementById("slash");
+			var eye = document.getElementById("eye");
+			
+			if(password.type === 'password'){
+				password.type = "text";
+				slash.style.display = "block";
+				eye.style.display = "none";
+			}
+			else{
+				password.type = "password";
+				slash.style.display = "none";
+				eye.style.display = "block";
+			}
+
+		}
+	</script>
+
+    <script>
+        // initialize a validator instance from the "FormValidator" constructor.
+        // A "<form>" element is optionally passed as an argument, but is not a must
+        var validator = new FormValidator({
+            "events": ['blur', 'input', 'change']
+        }, document.forms[0]);
+        // on form "submit" event
+        document.forms[0].onsubmit = function(e) {
+            var submit = true,
+                validatorResult = validator.checkAll(this);
+            console.log(validatorResult);
+            return !!validatorResult.valid;
+        };
+        // on form "reset" event
+        document.forms[0].onreset = function(e) {
+            validator.reset();
+        };
+        // stuff related ONLY for this demo page:
+        $('.toggleValidationTooltips').change(function() {
+            validator.settings.alerts = !this.checked;
+            if (this.checked)
+                $('form .alert').remove();
+        }).prop('checked', false);
 
-  <script>
-    // initialize a validator instance from the "FormValidator" constructor.
-    // A "<form>" element is optionally passed as an argument, but is not a must
-    var validator = new FormValidator({ "events": ['blur', 'input', 'change'] }, document.forms[0]);
-    // on form "submit" event
-    document.forms[0].onsubmit = function (e) {
-      var submit = true,
-        validatorResult = validator.checkAll(this);
-      console.log(validatorResult);
-      return !!validatorResult.valid;
-    };
-    // on form "reset" event
-    document.forms[0].onreset = function (e) {
-      validator.reset();
-    };
-    // stuff related ONLY for this demo page:
-    $('.toggleValidationTooltips').change(function () {
-      validator.settings.alerts = !this.checked;
-      if (this.checked)
-        $('form .alert').remove();
-    }).prop('checked', false);
-  </script>
+    </script>
 
-  <!-- jQuery -->
-  <script src="../vendors/jquery/dist/jquery.min.js"></script>
-  <!-- Bootstrap -->
-  <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-  <!-- FastClick -->
-  <script src="../vendors/fastclick/lib/fastclick.js"></script>
-  <!-- NProgress -->
-  <script src="../vendors/nprogress/nprogress.js"></script>
-  <!-- validator -->
-  <!-- <script src="../vendors/validator/validator.js"></script> -->
+    <!-- jQuery -->
+    <script src="../vendors/jquery/dist/jquery.min.js"></script>
+    <!-- Bootstrap -->
+    <script src="../vendors/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- FastClick -->
+    <script src="../vendors/fastclick/lib/fastclick.js"></script>
+    <!-- NProgress -->
+    <script src="../vendors/nprogress/nprogress.js"></script>
+    <!-- validator -->
+    <!-- <script src="../vendors/validator/validator.js"></script> -->
 
-  <!-- Custom Theme Scripts -->
-  <script src="../build/js/custom.min.js"></script>
+    <!-- Custom Theme Scripts -->
+    <script src="../build/js/custom.min.js"></script>
 
 </body>
 
-</html>
\ No newline at end of file
+</html>