form3

form3 validation

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<br />


<body>
  <div class="container">
    <div class="row form-group">
      <div class="col-xs-12 sw-main sw-theme-arrows" id="smartwizard">

        <ul class="nav nav-tabs step-anchor">
          <li><a href="design.html">Step 1<br><small>General Information</small></a></li>
          <li><a href="design2.html">Step 2<br><small>Identity </small></a></li>
          <li class="active"><a href="design3.html">Step 3<br><small>Bank Details</small></a></li>
          <li><a href="design4-1.html">Step 4<br><small>Financial Detail (Govt + Pvt)</small></a></li>
          <li><a href="design4-2.html">Step 5<br><small>Financial Detail (Govt)</small></a></li>
          <li><a href="design4-3.html">Step 6<br><small>Financial Detail (Pvt)</small></a></li>
          <li><a href="design4-4.html">Step 7<br><small>Financial Capacity</small></a></li>
          <li><a href="design5.html">Step 8<br><small>Technical Details</small></a></li>
        </ul>


      </div>
    </div>
  </div>
  <form class="container">
    <div class="row setup-content" id="step-1">
      <div class="col-xs-12">
        <div class="col-md-12 well text-center">
          <h1> Bank Details</h1>
          <hr />
          <br />
          <!-- <form> -->
          <div class="container col-xs-12">
            <div class="row clearfix">
              <div class="row">
                <div class="col-md-12">
                  <div class="form-group table-responsive">
                    <table class="table table-bordered table-hover" id="tab_logic">
                      <thead>
                        <tr>

                          <th colspan="2" class="text-center">

                          </th>


                        </tr>
                      </thead>
                      <tbody...

CSS

<style> .error_msg,
.error_msg1,
.error_msg2,
.error_msg3,
.error_msg4,
.error_msg5 {
  color: red;
}

label {
  float: left;
}


/*!  
            * SmartWizard v4.x
            * jQuery Wizard Plugin
            * http://www.techlaboratory.net/smartwizard
            *
            * Created by Dipu Raj
            * http://dipuraj.me
            *
            * Licensed under the terms of MIT License
            * https://github.com/techlab/SmartWizard/blob/master/LICENSE
            */


/* SmartWizard Theme: Arrows */

.sw-theme-arrows {
  border-radius: 5px;
}

.sw-theme-arrows > .sw-container {
  min-height: 200px;
}

.sw-theme-arrows .step-content {
  padding: 0 10px;
  border: 0px solid #D4D4D4;
  background-color: #FFF;
  text-align: left;
}

.sw-theme-arrows .sw-toolbar {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 0 !important;
  border-radius: 5px;
}

.sw-theme-arrows > .sw-toolbar-top {}

.sw-theme-arrows > .sw-toolbar-bottom {}

.sw-theme-arrows > ul.step-anchor {
  display: block;
  border: 0;
  border-bottom: 1px solid #ddd;
  padding: 0px;
  background: #f5f5f5;
  border-radius: 5px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  list-style: none;
  overflow: hidden;
  /*margin: -1px -1px 0 -1px -1px;*/
}

.sw-theme-arrows > ul.step-anchor li+li:before {
  padding: 0;
}

.sw-theme-arrows > ul.step-anchor > li {}

.sw-theme-arrows > ul.step-anchor > li > a,
.sw-theme-arrows > ul.step-anchor > li > a:hover {
  color: #bbb;
  text-decoration: none;
  padding: 10px 0 10px 45px;
  position: relative;
  display: block;
  border: 0 !important;
  border-radius: 0;
  outline-style: none;
  background: #f5f5f5;
}

.sw-theme-arrows > ul.step-anchor > li > a:after {
  content: " ";
  display: block;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 30px solid #f5f5f5;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 100%;
  z-index:...

JavaScript

$(document).on('change focus', '.newcbn', function() {
     var cbn = $(this).val();
     if (cbn === '') {

       $(this).next().text("*Fill name");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else if (/^[a-zA-Z ]+$/.test(cbn) === false) {
       $(this).next().text("*Invalid");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else {
       $(this).next().text("");
       $(this).removeClass('error');
       $(this).css({
         "border-color": "#ccc",
         "border": "1px solid #ccc"
       });
       $('#btnac').removeAttr('disabled');
     }
   });

   $(document).on('change focus', '.newcba', function() {
     var cba = $(this).val();
     if (cba === '') {
       $(this).next().text("*Fill Account Name");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else if (/^[a-zA-Z ]+$/.test(cba) === false) {
       $(this).next().text("*Invalid");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else {
       $(this).next().text("");
       $(this).removeClass('error');
       $(this).css({
         "border-color": "#ccc",
         "border": "1px solid #ccc"
       });
       $('#btnac').removeAttr('disabled');
     }
   });

   $(document).on('change focus', '.newcban', function() {
     var cban = $(this).val();
     if (cban === '') {
       $(this).next().text("*Fill Account Number");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else {
       $(this).next().text("");
       $(this).removeClass('error');
       $(this).css({
         "border-color": "#ccc",
         "border": "1px solid #ccc"
       });
     }
   });

   $(document).on('change focus', '.newcbic', function() {
     var cbic = $(this).val();
     if (cbic === '') {
       $(this).next().text("*Fill IFSC Code ");
       $(this).addClass('error');
       $(this).css('border-color', 'red');
     } else if...