提交表单时验证所有html行

我正在处理html表，用户可以在其中输入详细信息，然后单击提交按钮将数据提交到后端。我有3个必填列(Spring、Role、Project(，用户必须在点击提交按钮发送到后端之前输入这些列。如果用户在前两行输入数据并点击提交按钮，我想验证用户是否在每行的必填字段Sprint、Role和Project中输入了数据如果用户错过了在必填字段中输入数据，那么我想在该行附近显示错误消息，说"请输入必填字段"。如果用户没有在当用户在前3行中输入数据后单击提交按钮时，会出现madory字段。任何投入都将是有益的。我总共有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()">

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

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()">

相关内容

最新更新

热门标签：