"required" validation not working in javascript

Question

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>

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?

HTML validation will only works on form submission. In your case, you need to validate your fields in your myFunction function by yourself. — Nishesh Pratap Singh
– Nishesh Pratap Singh, Commented Dec 16, 2018 at 6:40
you do not need to give an id to the delete button if you just give it a class, delegate and use relative addressing: $("#tempTable").on("click",".delete",function(){ $(this).closest("tr").remove()}) — mplungjan
– mplungjan, Commented Dec 16, 2018 at 7:29

user2182349 · Accepted Answer · 2018-12-16 06:46:08Z

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>

is there a way i can show separate messsage below input field like "please enter office name","please enter from date"
.checkValidity also works on form elements. You can use it to show error messages. Also - check out the CSS for validation github.com/bgamrat/validation/blob/master/html/index.html

Collectives™ on Stack Overflow

"required" validation not working in javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related