Question

我正在html表上工作，用户可以在其中输入详细信息，然后单击Submit按钮将数据提交到后端。我有3个必填列（Spring，Role，Project），这些列是用户在单击“提交”按钮时发送到后端之前必须输入的。如果用户在前两行中输入数据并单击提交按钮，我想验证用户是否已在必填字段Sprint，Role和Project中为每一行输入数据，并且如果用户错过了在必填字段中输入数据，那么我想在该行附近显示错误消息，提示“请输入必填字段”。我很困惑，如果用户未在其中输入数据，则如何显示错误消息用户在前三行输入数据后单击“提交”按钮时的必填字段。任何输入都会有所帮助。我总共有6行，用户可以在其中输入全部或很少的详细信息，然后单击提交按钮。只有我需要验证行并在必填字段中缺少数据的每一行附近显示错误消息。

演示链接：https://plnkr.co/edit/QbiuE8jOIwd2t40akBwe?p=preview

示例html代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>

        function submitData(){
          alert("submit");
          
        }
    </script>
</head>
<body>

<table id="productTable" border="1">

    <tr>
        <th>SID</th>
        <th>Sprint <span style="color:red;">*</span></th>
        <th>Role<span style="color:red;">*</span></th>
        <th>Comments</th>
        <th>Project<span style="color:red;">*</span></th>
    </tr>

    <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>
        <tr>
        <td><input type="text" name="sid" value=""></td>
        <td>
            <select class="sprint" >
                <option value=""></option>
                <option value="">121.1</option>
                <option value="">121.2</option>
                <option value="">121.3</option>
                <option value="">122.1</option>
                <option value="">122.2</option>
            </select>
        </td>
        <td>
            <input type="text" name="role" value="">
        </td>
        <td>
            <input type="text" name="Comments" value="">
        </td>
        <td>
            <select class="project" >
                <option value=""></option>
                <option value="">ProA</option>
                <option value="">ProB</option>
                <option value="">ProC</option>
                <option value="">ProD</option>
            </select>
        </td>
    </tr>       

</table> <br>
<input type="submit" value="submit" onclick="submitData()">

Answer 1

检查是否输入了所有数据，然后部分输入了其余数据

if (sprint && role && project) {.....}
else if (!sprint && !role && !project) {} // do nothing
else {....}

演示：

function submitData() {
  var dataPassed = false,
    dataCount = 0,
    hasEnteredData = false;
  $('#productTable tr:not(:first)').each(function(index) {

    var sprint = $(this).find('.sprint :selected').text(),
      role = $(this).find('input[name="role"]').val(),
      project = $(this).find('.project :selected').text();
    if (sprint && role && project) {
      dataPassed = true
      dataCount++;
    }
    else if (!sprint && !role && !project) {
      // all empty, skip
    }
    else {
      alert('Required data missing in row: ' +
        (index + 1) + '\nfill: Sprint, Role, Project')
      dataPassed = false;
      hasEnteredData = true;
      return false;
    }
  })

  if (dataPassed) {
    alert('Success, Data count: ' +
      dataCount + ' rows, submit?');
    // do submit
  }
  else if (!hasEnteredData) {
    alert('No data entered')
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table id="productTable" border="1">

    <tr>
      <th>SID</th>
      <th>Sprint <span style="color:red;">*</span></th>
      <th>Role<span style="color:red;">*</span></th>
      <th>Comments</th>
      <th>Project<span style="color:red;">*</span></th>
    </tr>

    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="text" name="sid" value="">
      </td>
      <td>
        <select class="sprint">
          <option value=""></option>
          <option value="">121.1</option>
          <option value="">121.2</option>
          <option value="">121.3</option>
          <option value="">122.1</option>
          <option value="">122.2</option>
        </select>
      </td>
      <td>
        <input type="text" name="role" value="">
      </td>
      <td>
        <input type="text" name="Comments" value="">
      </td>
      <td>
        <select class="project">
          <option value=""></option>
          <option value="">ProA</option>
          <option value="">ProB</option>
          <option value="">ProC</option>
          <option value="">ProD</option>
        </select>
      </td>
    </tr>
  </table>
  <br>
  <input type="submit" value="submit" onclick="submitData()">

提交表单时验证所有html行

1 个答案: