title: How to avoid adding a new row if the user is not finished fill-up the rows and clicking the save button?
body: <p>The problem is when I didn't click the save button and didn't fill-up the row consist of firstName. It still adding a new row after I click the 'Add New Row' button. The worse part is I still get the same id's. Could somebody help me with my problem on my validation?</p>
  
  <pre><code>function Add() {
          isAdd = true;
          if (PersonList.length == 0) {
              for (var index = 0; index &lt; tblInfo.childNodes.length; index++) {
                  if (tblInfo.childNodes[index].nodeName == "TR") {
                      tblInfo.removeChild(tblInfo.childNodes[index]);
                      break;
                  }
              }
          }
          newTr = document.createElement("TR");
          newTd = document.createElement("TD");
          textNode = document.createTextNode(id);
          details.push(textNode.nodeValue);
          newTd.appendChild(textNode);
          newTd.style.textAlign = "center";
          newTr.appendChild(newTd);
  
          newTd = document.createElement("TD");
          input = document.createElement("input");
          input.setAttribute("type", "text");
          details.push(input);
          newTd.appendChild(input);
          newTd.style.textAlign = "center";
          newTr.appendChild(newTd);
  
          newTd = document.createElement("TD");
          btn = document.createElement("button");
          textNode = document.createTextNode("UPDATE");
          btn.appendChild(textNode);
          btn.setAttribute("class", "btnUpdate");
          btn.disabled = true;
          btn.addEventListener("click", function() {Update(this);});
          newTd.appendChild(btn);
          newTr.appendChild(newTd);
  
          btn = document.createElement("button");
          textNode = document.createTextNode("SAVE");
          btn.appendChild(textNode);
          btn.setAttribute("class", "btnSave");
          btn.addEventListener("click", function() {Save(details);});
          newTd.appendChild(btn);
          newTr.appendChild(newTd);
  
          btn = document.createElement("button");
          textNode = document.createTextNode("CANCEL");
          btn.appendChild(textNode);
          btn.setAttribute("class", "btnCancel");
          btn.addEventListener("click", Cancel);
          newTd.appendChild(btn);
          btn.setAttribute("id", id);
          newTr.appendChild(newTd);
  
          tblInfo.appendChild(newTr);
      }
  </code></pre>