title: How to validate and restrict submit when form not valid using jQuery
body: <p>I'm using one dynamic table and form and i create one small validation form my form and that dynamic table validation.. its working but if form is not valid also its submitting.. dont need that..
  just want when form is valid that time only form going to submit. otherwise restrict error message wants to shown.. like "this field is required"</p>
  
  <p>Fiddle Here..</p>
  
  <p><strong><a href="https://jsfiddle.net/joelshah/7rk3s98v/" rel="nofollow noreferrer">FIDDLE HERE..</a></strong></p>
  
  <p>My sample code is here..</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
  
    $('#contactForm').validate({
      rules: {
        acctcode: {
          required: true
        },
        accountName: {
          required: true
        },
        narr: {
          required: true
        },
        debit: {
          required: true
        },
        billtype: {
          required: true
        },
        cashactcode: {
          required: true
        }
      },
      submitHandler: function(form) {
        alert('valid form');
        return false;
      }
    });
    $('#cashSub').on('click', function() {
      $('#contactForm').valid();
    });
  
  });
  
  
  $(document).ready(function() {
  
    $("#add_Row").on("click", function() {
      var counter = 0;
      var idVal = $('#tab_logic tr:last').find('td:first').html();
      var matches = idVal.match(/\d+/g);
      if (matches != null) {
        counter = Number(matches) + counter + 1;
      }
      var newRow = $("&lt;tr&gt;");
      var cols = "";
      cols += '&lt;td&gt;&lt;select class="form-control sel_sel status" id="accountName' + counter + '" name="accountName" required&gt;&lt;option&gt;Select cash account&lt;/option&gt;&lt;option value="1"&gt;TDS A/c 1&lt;/option&gt;&lt;option value="2"&gt;TDS A/c 2&lt;/option&gt;&lt;option value="3"&gt;TDS A/c 3&lt;/option&gt;&lt;/select&gt;&lt;/td&gt;'
      cols += '&lt;td&gt;&lt;input type="text" class="form-control required price" name="narr" placeholder="Enter your text here" id="acc_narrat' + counter + '" data-toggle="modal" data-target="#narratModal" onchange="unname(this.id, this.value)"/&gt;&lt;/td&gt;';
  
      cols += '&lt;td&gt;&lt;button type="button" class="adRow ibtnDel" style="width:70%;"&gt;x&lt;/button&gt;&lt;/a&gt;&lt;/td&gt;';
  
      newRow.append(cols);
  
  
      var defVal = $("select[name=acctname]").find(":selected").val();
      if (defVal) {
        $("select[name=accountName]").find(`option[value=${defVal}]`).hide();
      }
      $("table.order-list").append(newRow);
      setValCashVal('accountName'.concat(counter));
      bindScript();
      counter++;
  
    });
    $("table.order-list").on("click", ".ibtnDel", function(_event) {
      $(this).closest("tr").remove();
      evaluateTotal();
    });
  });
  
  /* Apend value to all row */
  $("#ok_button").on('click', function() {
    let val = $("#cash_text").val();
    $("#pay_narrat, #acc_narrat").val(val);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.load {
    border-color: black;
    background-color: plum !important;
  }
  
  .load:hover {
    background-color: blue
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;form id="contactForm"&gt;
  
    &lt;input type="button" class="add_Row adRow" id="add_Row" value="Add Row"&gt;
    &lt;table class="table table-bordered table-hover order-list" id="tab_logic" style="width:60% !important"&gt;
  
      &lt;tbody&gt;
        &lt;tr id="fst_row"&gt;
          &lt;td&gt;
            &lt;select class="form-control sel_sel" id="payacc" name="actname" for="actname"&gt;
              &lt;option value=""&gt;Select TDS A/c name&lt;/option&gt;
              &lt;option value="1"&gt;TDS A/c 1&lt;/option&gt;
              &lt;option value="2"&gt;TDS A/c 2&lt;/option&gt;
              &lt;option value="3"&gt;TDS A/c 3&lt;/option&gt;
            &lt;/select&gt;
          &lt;/td&gt;
          &lt;td&gt;
            &lt;input type="text" class="form-control required" id="pay_narrat" name="narr" for="narr" data-toggle="modal" data-target="#narratModal" placeholder="Enter your text here" /&gt;
  
          &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  
    &lt;!-- narrtion modal --&gt;
  
    &lt;div class="modal fade" id="narratModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close cash-dismiss" data-dismiss="modal" aria-label="Close"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
            &lt;h4 class="modal-title modal_head" id="myModalLabel"&gt;Narration&lt;/h4&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
            &lt;label class="modal_note"&gt;Note: Only alphabets A-Z a-z number 0-9 and characters % [] () - _ . , are allowed in text&lt;/label&gt;
            &lt;textarea id="cash_text" class="cash_text" maxlength="200"&gt;Enter Here...&lt;/textarea&gt;
            &lt;span class="modal_valid"&gt;0/200 Characterts entered&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="modal-footer narr_footer"&gt;
            &lt;button id="ok_button" type="button" class="btn btn-primary cashmodal_btn" data-dismiss="modal"&gt;OK&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  &lt;!-- submit --&gt;
  &lt;div class="form-group col-4 vocSub" style="margin-bottom: 0px !important;"&gt;
    &lt;div class="col-md-12 cashform_submit" id=""&gt;
      &lt;input type="submit" class="btn add-btn submit-btn load cashmainBtn" id="cashSub" th:value="Submit" tabindex="1" value="Submit" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>