title: "required" validation not working in javascript
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>pushData = [];
  //+ button when clicked
  function myFunction() {
      var custOfficeId = document.getElementById('customOfficeId').value;
      var custOfficeName = $("#customOfficeId option:selected").text();
      var fromDate = document.getElementById('fromDate').value;
      var toDate = document.getElementById('toDate').value;
      var consignmentNo = document.getElementById('consignmentNo').value;
      var selectionName = "A";
      var selectionId = 1;
      var selecOff = {
          custOfficeId,
          custOfficeName,
          fromDate,
          toDate,
          consignmentNo,
          selectionId,
          selectionName
      };
      console.log(selecOff);
      pushData.push(selecOff);
      console.log(pushData);
      populateSelectionCustomTable();
  }
  
  function populateSelectionCustomTable() {
  
      $("#tempTable tbody").html("");
      for (var i = 0; i &lt; pushData.length; i++) {
          var r = pushData[i];
          $("#tempTable tbody")
              .append(
                  "&lt;tr&gt;" +
                  "&lt;td&gt;" +
                  r.custOfficeName +
                  "&lt;/td&gt;&lt;td&gt;" +
                  r.fromDate +
                  "&lt;/td&gt;&lt;td&gt;" +
                  r.toDate +
                  "&lt;/td&gt;" +
                  "&lt;td&gt;" +
                  r.consignmentNo +
                  "&lt;/td&gt;" +
                  "&lt;td&gt;" +
                  r.selectionName +
                  "&lt;/td&gt;" +
                  "&lt;td&gt;" +
                  "&lt;input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
                  i +
                  "' class='deleteIcon'/&gt;" +
                  "&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;");
      }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
     &lt;head&gt;
        &lt;title&gt;&lt;/title&gt;
        &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"&gt;
        &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"&gt;&lt;/script&gt;
        &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"&gt;&lt;/script&gt;
     &lt;/head&gt;
     &lt;body&gt;
        &lt;div class="form-group row"&gt;
           &lt;div class="col-md-4"&gt;
              &lt;label&gt;Custom Office&lt;/label&gt;
           &lt;/div&gt;
           &lt;div class="col-md-2"&gt;
              &lt;label&gt;From Date&lt;/label&gt;
           &lt;/div&gt;
           &lt;div class="col-md-2"&gt;
              &lt;label&gt;To Date&lt;/label&gt;
           &lt;/div&gt;
           &lt;div class="col-md-4"&gt;Consignment No&lt;/div&gt;
           &lt;div class="col-md-4"&gt;
              &lt;select class="form-control" id="customOfficeId" required
                 name="customOfficeId" &gt;
                 &lt;option value="" disabled selected&gt;Choose&lt;/option&gt;
                 &lt;option value=1&gt;Office 1&lt;/option&gt;
                 &lt;option value=2&gt;Office 2&lt;/option&gt;
              &lt;/select&gt;
           &lt;/div&gt;
           &lt;div class="col-md-2"&gt;
              &lt;input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" 
                 onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/&gt;
           &lt;/div&gt;
           &lt;div class="col-md-2"&gt;
              &lt;input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
                 name="toDate"  onfocus="showNdpCalendarBox('toDate')" required /&gt;
           &lt;/div&gt;
           &lt;div class="col-md-3"&gt;
              &lt;input type="number" class="form-control" id="consignmentNo"
                 required name="consignmentNo"&gt;
           &lt;/div&gt;
           &lt;div class="col-md-1"&gt;
              &lt;button onclick="myFunction()"&gt;+&lt;/button&gt;
           &lt;/div&gt;
        &lt;/div&gt;
        &lt;table class="table table-bodered" id="tempTable"&gt;
           &lt;thead&gt;
              &lt;th&gt;Custom Office&lt;/th&gt;
              &lt;th&gt;From Date&lt;/th&gt;
              &lt;th&gt;To Date&lt;/th&gt;
              &lt;th&gt;Consignment No&lt;/th&gt;
              &lt;th&gt;Selection Name&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
           &lt;/thead&gt;
           &lt;tbody&gt;
           &lt;/tbody&gt;
        &lt;/table&gt;
     &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/37wgb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/37wgb.png" alt="enter image description here"></a></p>
  
  <p>I have added the "required" attribute in each of the input field and in select options above in html.But if i even didn't enter any data and click plus button it is getting pushed in table rather it should show me the validation required error. In "select" also i added the required field but the default is getting added in table automatically.How can i make this html5 required validation working here?  </p>