"required" validation not working in javascript

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 < pushData.length; i++) {
        var r = pushData[i];
        $("#tempTable tbody")
            .append(
                "<tr>" +
                "<td>" +
                r.custOfficeName +
                "</td><td>" +
                r.fromDate +
                "</td><td>" +
                r.toDate +
                "</td>" +
                "<td>" +
                r.consignmentNo +
                "</td>" +
                "<td>" +
                r.selectionName +
                "</td>" +
                "<td>" +
                "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
                i +
                "' class='deleteIcon'/>" +
                "</td></tr></tbody>");
    }

}
<!DOCTYPE html>
<html>
   <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
   </head>
   <body>
      <div class="form-group row">
         <div class="col-md-4">
            <label>Custom Office</label>
         </div>
         <div class="col-md-2">
            <label>From Date</label>
         </div>
         <div class="col-md-2">
            <label>To Date</label>
         </div>
         <div class="col-md-4">Consignment No</div>
         <div class="col-md-4">
            <select class="form-control" id="customOfficeId" required
               name="customOfficeId" >
               <option value="" disabled selected>Choose</option>
               <option value=1>Office 1</option>
               <option value=2>Office 2</option>
            </select>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" 
               onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
         </div>
         <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate"
               name="toDate"  onfocus="showNdpCalendarBox('toDate')" required />
         </div>
         <div class="col-md-3">
            <input type="number" class="form-control" id="consignmentNo"
               required name="consignmentNo">
         </div>
         <div class="col-md-1">
            <button onclick="myFunction()">+</button>
         </div>
      </div>
      <table class="table table-bodered" id="tempTable">
         <thead>
            <th>Custom Office</th>
            <th>From Date</th>
            <th>To Date</th>
            <th>Consignment No</th>
            <th>Selection Name</th>
            <th>Action</th>
         </thead>
         <tbody>
         </tbody>
      </table>
   </body>
</html>

enter image description here

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?

1 answer

  • answered 2018-12-16 06:46 user2182349

    You can use checkValidity() to check if the fields in a form are valid.

    https://www.w3schools.com/js/js_validation_api.asp

    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);
      if (document.getElementById("new-row").checkValidity()) {
        pushData.push(selecOff);
        console.log(pushData);
        populateSelectionCustomTable();
      } else {
        alert('New row data is invalid or incomplete');
      }
    }
    
    function populateSelectionCustomTable() {
    
      $("#tempTable tbody").html("");
      for (var i = 0; i < pushData.length; i++) {
        var r = pushData[i];
        $("#tempTable tbody")
          .append(
            "<tr>" +
            "<td>" +
            r.custOfficeName +
            "</td><td>" +
            r.fromDate +
            "</td><td>" +
            r.toDate +
            "</td>" +
            "<td>" +
            r.consignmentNo +
            "</td>" +
            "<td>" +
            r.selectionName +
            "</td>" +
            "<td>" +
            "<input id='filter" + i + "' value='Delete' type='button' alt='Delete" +
            i +
            "' class='deleteIcon'/>" +
            "</td></tr></tbody>");
      }
    
    }
    <!DOCTYPE html>
    <html>
    
    <head>
      <title></title>
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    </head>
    
    <body>
      <form id="new-row">
        <div class="form-group row">
          <div class="col-md-4">
            <label>Custom Office</label>
          </div>
          <div class="col-md-2">
            <label>From Date</label>
          </div>
          <div class="col-md-2">
            <label>To Date</label>
          </div>
          <div class="col-md-4">Consignment No</div>
          <div class="col-md-4">
            <select class="form-control" id="customOfficeId" required name="customOfficeId">
              <option value="" disabled selected>Choose</option>
              <option value=1>Office 1</option>
              <option value=2>Office 2</option>
            </select>
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="fromDate" onfocus="showNdpCalendarBox('fromDate')" name="fromDate" required/>
          </div>
          <div class="col-md-2">
            <input type="text" class="form-control nepali-calendar ndp-nepali-calendar" id="toDate" name="toDate" onfocus="showNdpCalendarBox('toDate')" required />
          </div>
          <div class="col-md-3">
            <input type="number" class="form-control" id="consignmentNo" required name="consignmentNo">
          </div>
      </form>
      <div class="col-md-1">
        <button onclick="myFunction()">+</button>
      </div>
      </div>
      <table class="table table-bodered" id="tempTable">
        <thead>
          <th>Custom Office</th>
          <th>From Date</th>
          <th>To Date</th>
          <th>Consignment No</th>
          <th>Selection Name</th>
          <th>Action</th>
        </thead>
        <tbody>
        </tbody>
      </table>
    </body>
    
    </html>