Question

我有一个包含三个输入字段（文本，日期和下拉列表）的简单表格，点击“添加行”按钮后，会添加新行。但是我需要在输入字段上执行以下验证;如果输入字段为空并且应该抛出错误消息，则不应添加新行。如何实现？

添加新行和删除所选行的功能：

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>

Answer 1

此代码将检查上一行，如果该行的名称或日期字段为空，则不会添加新行。警报显示“请在添加新行之前填写当前行”，但您可以将消息更改为您喜欢的任何内容。

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;
}

在此行之后插入：

var rowCount = table.rows.length;

在此之前：

var row = table.insertRow(rowCount);

如果字段为空，如何执行输入字段验证并防止添加新行？

1 个答案: