本文旨在提供一个清晰的指南，帮助开发者在使用 jQuery 验证 Bootstrap 表格中的输入字段时，能够同时处理文本框、日期选择器、下拉菜单等多种类型的输入，确保所有字段在提交前都已填写，并提供视觉反馈。通过修改现有的 jQuery 代码，使其能够识别并验证所有类型的输入，并使用 CSS 类来高亮显示未填写的字段，从而提升用户体验和数据完整性。
问题分析
原有的 jQuery 代码只针对 input[type="text"] 类型的输入框进行验证，导致日期选择器 (input[type="date"]) 和下拉菜单 (select) 等其他类型的输入字段无法被正确验证。因此，需要修改选择器，使其能够包含所有需要验证的输入类型。
解决方案
修改 jQuery 代码中的选择器，使其能够匹配所有需要验证的输入类型。将 .find('input[type="text"]') 修改为 .find('input[type="text"], input[type="date"], select')， 即可同时选中文本输入框、日期选择器和下拉菜单。
修改后的代码片段：
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});完整示例代码：
以下是一个完整的 HTML 示例，展示了如何将修改后的 jQuery 代码应用到 Bootstrap 表格中，以验证文本输入框、日期选择器和下拉菜单的非空值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Table with Add and Delete Row Feature</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
color: #404E67;
background: #F5F7FA;
font-family: 'Open Sans', sans-serif;
}
.table-wrapper {
width: 700px;
margin: 30px auto;
background: #fff;
padding: 20px;
box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
.table-title {
padding-bottom: 10px;
margin: 0 0 10px;
}
.table-title h2 {
margin: 6px 0 0;
font-size: 22px;
}
.table-title .add-new {
float: right;
height: 30px;
font-weight: bold;
font-size: 12px;
text-shadow: none;
min-width: 100px;
border-radius: 50px;
line-height: 13px;
}
.table-title .add-new i {
margin-right: 4px;
}
table.table {
table-layout: fixed;
}
table.table tr th, table.table tr td {
border-color: #e9e9e9;
}
table.table th i {
font-size: 13px;
margin: 0 5px;
cursor: pointer;
}
table.table th:last-child {
width: 100px;
}
table.table td a {
cursor: pointer;
display: inline-block;
margin: 0 5px;
min-width: 24px;
}
table.table td a.add {
color: #27C46B;
}
table.table td a.edit {
color: #FFC107;
}
table.table td a.delete {
color: #E34724;
}
table.table td i {
font-size: 19px;
}
table.table td a.add i {
font-size: 24px;
margin-right: -1px;
position: relative;
top: 3px;
}
table.table .form-control {
height: 32px;
line-height: 32px;
box-shadow: none;
border-radius: 2px;
}
table.table .form-control.error {
border-color: #f50000;
}
table.table td .add {
display: none;
}
</style>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
var actions = $("table td:last-child").html();
// Append table with add row form on add new button click
$(".add-new").click(function(){
$(this).attr("disabled", "disabled");
var index = $("table tbody tr:last-child").index();
var row = '<tr>' +
'<td><input type="text" class="form-control" name="name" id="name"></td>' +
'<td><input type="text" class="form-control" name="department" id="department"></td>' +
'<td><input type="date" class="form-control" name="date" id="date"></td>' +
'<td><select class="form-control" name="status" id="status"><option value="active">Active</option><option value="inactive">Inactive</option></select></td>' +
'<td>' + actions + '</td>' +
'</tr>';
$("table").append(row);
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();
$('[data-toggle="tooltip"]').tooltip();
});
// Add row on add button click
$(document).on("click", ".add", function(){
var empty = false;
var input = $(this).parents("tr").find('input[type="text"], input[type="date"], select');
input.each(function(){
if(!$(this).val()){
$(this).addClass("error");
empty = true;
} else{
$(this).removeClass("error");
}
});
$(this).parents("tr").find(".error").first().focus();
if(!empty){
input.each(function(){
$(this).parent("td").html($(this).val());
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").removeAttr("disabled");
}
});
// Edit row on edit button click
$(document).on("click", ".edit", function(){
$(this).parents("tr").find("td:not(:last-child)").each(function(){
var inputType = 'text';
if ($(this).find('input[type="date"]').length) {
inputType = 'date';
} else if ($(this).find('select').length) {
inputType = 'select';
}
var currentValue = $(this).text();
var inputHtml = '';
if (inputType === 'text' || inputType === 'date') {
inputHtml = '<input type="' + inputType + '" class="form-control" value="' + currentValue + '">';
} else if (inputType === 'select') {
var optionsHtml = '<option value="active">Active</option><option value="inactive">Inactive</option>';
inputHtml = '<select class="form-control">' + optionsHtml + '</select>';
}
$(this).html(inputHtml);
});
$(this).parents("tr").find(".add, .edit").toggle();
$(".add-new").attr("disabled", "disabled");
});
// Delete row on delete button click
$(document).on("click", ".delete", function(){
$(this).parents("tr").remove();
$(".add-new").removeAttr("disabled");
});
});
</script>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Employee <b>Details</b></h2></div>
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Name</th>
<th>Department</th>
<th>Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Administration</td>
<td>2023-01-01</td>
<td>Active</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>Peter Parker</td>
<td>Customer Service</td>
<td>2023-02-15</td>
<td>Inactive</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
<tr>
<td>Fran Wilson</td>
<td>Human Resources</td>
<td>2023-03-10</td>
<td>Active</td>
<td>
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>注意事项
- 选择器范围： 根据实际需求，可能需要调整选择器以包含其他类型的输入字段，例如 textarea 等。
- 验证逻辑： .val() 方法适用于大多数输入类型，但对于某些特殊类型的输入，可能需要使用其他方法来获取其值。
- 用户体验： 除了高亮显示未填写的字段外，还可以添加其他用户友好的提示信息，例如在字段旁边显示错误消息。
总结
通过修改 jQuery 代码中的选择器，可以轻松地扩展验证范围，使其能够处理多种类型的输入字段。这有助于确保所有必需的字段在提交前都已填写，从而提高数据的完整性和用户体验。记住，根据实际需求调整选择器和验证逻辑，并提供清晰的错误提示，对于构建健壮且用户友好的表单至关重要。
