CODEWITHSUNDEEP
javascripthtmlvalidationinput
Vivek
Vivek

Reputation: 293

How to perform input fields validation and to prevent from adding new row if the fields are empty?

I have a simple table with three input fields (text, date and dropdown) and on click of an "add row" button, new row is getting added. However I need to perform below validation on the input fields; the new row should not get added if the input fields are empty and it should throw an error message. How to achieve that?

Functions to add new row and to delete selected row:

function addRow(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);

  var colCount = table.rows[0].cells.length;

  for (var i = 0; i < colCount; i++) {

    var newcell = row.insertCell(i);

    newcell.innerHTML = table.rows[0].cells[i].innerHTML;
    //alert(newcell.childNodes);
    switch (newcell.childNodes[0].type) {
      case "text":
        newcell.childNodes[0].value = "";
        break;
      case "checkbox":
        newcell.childNodes[0].checked = false;
        break;
      case "select-one":
        newcell.childNodes[0].selectedIndex = 0;
        break;
    }
  }
}

function deleteRow(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        if (rowCount <= 1) {
          alert("Cannot delete all the rows.");
          break;
        }
        table.deleteRow(i);
        rowCount--;
        i--;
      }


    }
  } catch (e) {
    alert(e);
  }
}
body {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 30px;
  color: #777;
  background: #366161;
}

#dataTable {
  margin: 0 auto;
  margin-top: 30px;
}

.btn {
  -webkit-border-radius: 5;
  -moz-border-radius: 5;
  border-radius: 5px;
  font-family: Arial;
  color: #ffffff;
  font-size: 15px;
  background: #2f354a;
  padding: 7px 15px 7px 15px;
  text-decoration: none;
  outline: none;
  margin: 30px;
}

.btn:hover {
  background: #3cb0fd;
  text-decoration: none;
}

.btn_container {
  margin: 0 auto;
  width: 360px;
}

select option[value="red"] {
  background-color: #f00;
}

select option[value="yellow"] {
  background-color: #FFFF00;
}

select option[value="green"] {
  background-color: #7CFC00;
}

h1.heading {
  text-align: center;
  color: #ffffff;
}

#errors {
  margin-left: 310px;
  color: red;
  font-size: 16px;
}
<body>
  <h1 class="heading"> Simple Form</h1>
  <table id="dataTable" width="900px" cellspacing="5" cellpadding="10" style="background:#F0F8FF;border:1px dotted">
    <tr>
      <td><input type="checkbox" name="chk" /></td>
      <td> Name : <input type="text" name="txt" id="fname" placeholder="Enter your name" required/></td>
      <td>Date: <input type="date" name="date" id="delivery_date" required/></td>
      <td>
        Color:
        <select name="Color" required>
               <option value="red">Red</option>
               <option value="yellow">yellow</option>
               <option value="green">Green</option>
            </select>
      </td>
    </tr>

  </table>
  <div class="btn_container">
    <input type="button" class="btn" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" class="btn" value="Delete Row" onclick="deleteRow('dataTable')" />
  </div>
</body>

Upvotes: 1

Views: 886

Answers (1)

freginold
freginold

Reputation: 3956

This code will check the previous row and, if either the name or date field of that row is empty, a new row won't be added. The alert displays, "Please fill the current row in before adding a new row" but you change the message to anything you like.

var prevName = table.rows[rowCount - 1].cells[1].firstChild.nextSibling.value;
var prevDate = table.rows[rowCount - 1].cells[2].firstChild.nextSibling.value;

if (prevName == "" || prevDate == "") {
    alert("Please fill the current row in before adding a new row");
    return;
}

Insert it after this line:

var rowCount = table.rows.length;

and before this line:

var row = table.insertRow(rowCount);

Upvotes: 2

Related Questions