I have a Bootstrap table I obtained from Tutorial Republic. It goes as such:
JavaScript
x
210
210
1
<!DOCTYPE html>2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<meta http-equiv="X-UA-Compatible" content="IE=edge">6
<meta name="viewport" content="width=device-width, initial-scale=1">7
<title>Bootstrap Table with Add and Delete Row Feature</title>8
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">9
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">10
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">11
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">12
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>13
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>14
<style>15
body {16
color: #404E67;17
background: #F5F7FA;18
font-family: 'Open Sans', sans-serif;19
}20
.table-wrapper {21
width: 700px;22
margin: 30px auto;23
background: #fff;24
padding: 20px; 25
box-shadow: 0 1px 1px rgba(0,0,0,.05);26
}27
.table-title {28
padding-bottom: 10px;29
margin: 0 0 10px;30
}31
.table-title h2 {32
margin: 6px 0 0;33
font-size: 22px;34
}35
.table-title .add-new {36
float: right;37
height: 30px;38
font-weight: bold;39
font-size: 12px;40
text-shadow: none;41
min-width: 100px;42
border-radius: 50px;43
line-height: 13px;44
}45
.table-title .add-new i {46
margin-right: 4px;47
}48
table.table {49
table-layout: fixed;50
}51
table.table tr th, table.table tr td {52
border-color: #e9e9e9;53
}54
table.table th i {55
font-size: 13px;56
margin: 0 5px;57
cursor: pointer;58
}59
table.table th:last-child {60
width: 100px;61
}62
table.table td a {63
cursor: pointer;64
display: inline-block;65
margin: 0 5px;66
min-width: 24px;67
} 68
table.table td a.add {69
color: #27C46B;70
}71
table.table td a.edit {72
color: #FFC107;73
}74
table.table td a.delete {75
color: #E34724;76
}77
table.table td i {78
font-size: 19px;79
}80
table.table td a.add i {81
font-size: 24px;82
margin-right: -1px;83
position: relative;84
top: 3px;85
} 86
table.table .form-control {87
height: 32px;88
line-height: 32px;89
box-shadow: none;90
border-radius: 2px;91
}92
table.table .form-control.error {93
border-color: #f50000;94
}95
table.table td .add {96
display: none;97
}98
</style>99
<script>100
$(document).ready(function(){101
$('[data-toggle="tooltip"]').tooltip();102
var actions = $("table td:last-child").html();103
// Append table with add row form on add new button click104
$(".add-new").click(function(){105
$(this).attr("disabled", "disabled");106
var index = $("table tbody tr:last-child").index();107
var row = '<tr>' +108
'<td><input type="text" class="form-control" name="name" id="name"></td>' +109
'<td><input type="text" class="form-control" name="department" id="department"></td>' +110
'<td><input type="text" class="form-control" name="phone" id="phone"></td>' +111
'<td>' + actions + '</td>' +112
'</tr>';113
$("table").append(row); 114
$("table tbody tr").eq(index + 1).find(".add, .edit").toggle();115
$('[data-toggle="tooltip"]').tooltip();116
});117
// Add row on add button click118
$(document).on("click", ".add", function(){119
var empty = false;120
var input = $(this).parents("tr").find('input[type="text"]');121
input.each(function(){122
if(!$(this).val()){123
$(this).addClass("error");124
empty = true;125
} else{126
$(this).removeClass("error");127
}128
});129
$(this).parents("tr").find(".error").first().focus();130
if(!empty){131
input.each(function(){132
$(this).parent("td").html($(this).val());133
}); 134
$(this).parents("tr").find(".add, .edit").toggle();135
$(".add-new").removeAttr("disabled");136
} 137
});138
// Edit row on edit button click139
$(document).on("click", ".edit", function(){ 140
$(this).parents("tr").find("td:not(:last-child)").each(function(){141
$(this).html('<input type="text" class="form-control" value="' + $(this).text() + '">');142
}); 143
$(this).parents("tr").find(".add, .edit").toggle();144
$(".add-new").attr("disabled", "disabled");145
});146
// Delete row on delete button click147
$(document).on("click", ".delete", function(){148
$(this).parents("tr").remove();149
$(".add-new").removeAttr("disabled");150
});151
});152
</script>153
</head>154
<body>155
<div class="container">156
<div class="table-wrapper">157
<div class="table-title">158
<div class="row">159
<div class="col-sm-8"><h2>Employee <b>Details</b></h2></div>160
<div class="col-sm-4">161
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i> Add New</button>162
</div>163
</div>164
</div>165
<table class="table table-bordered">166
<thead>167
<tr>168
<th>Name</th>169
<th>Department</th>170
<th>Phone</th>171
<th>Actions</th>172
</tr>173
</thead>174
<tbody>175
<tr>176
<td>John Doe</td>177
<td>Administration</td>178
<td>(171) 555-2222</td>179
<td>180
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>181
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>182
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>183
</td>184
</tr>185
<tr>186
<td>Peter Parker</td>187
<td>Customer Service</td>188
<td>(313) 555-5735</td>189
<td>190
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>191
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>192
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>193
</td>194
</tr>195
<tr>196
<td>Fran Wilson</td>197
<td>Human Resources</td>198
<td>(503) 555-9931</td>199
<td>200
<a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>201
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>202
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>203
</td>204
</tr> 205
</tbody>206
</table>207
</div>208
</div> 209
</body>210
</html>When you click “+ Add New” and try to add an empty record (leaving text fields empty), you are prevented from doing so and the textbox’s border turns red.
However, when I add in a date field,
JavaScript
1
8
1
var row = '<tr>' +2
'<td><input type="text" class="form-control" name="name" id="name"></td>' +3
'<td><input type="text" class="form-control" name="department" id="department"></td>' + 4
'<td><input type="text" class="form-control" name="phone" id="phone"></td>' +5
'<td><input type="date" class="form-control" name="date" id="date"></td>' +6
'<td>' + actions + '</td>' +7
'</tr>';8
I am still seemingly prevented from adding a record but the border of the date box does not turn red. The same thing happens for <select> dropdown menus.
I am looking at this bit here, the line .find('input[type="text"]'):
JavaScript
1
21
21
1
// Add row on add button click2
$(document).on("click", ".add", function(){3
var empty = false;4
var input = $(this).parents("tr").find('input[type="text"]');5
input.each(function(){6
if(!$(this).val()){7
$(this).addClass("error");8
empty = true;9
} else{10
$(this).removeClass("error");11
}12
});13
$(this).parents("tr").find(".error").first().focus();14
if(!empty){15
input.each(function(){16
$(this).parent("td").html($(this).val());17
}); 18
$(this).parents("tr").find(".add, .edit").toggle();19
$(".add-new").removeAttr("disabled");20
} 21
but I am afraid that is the extent of my abilities as a jQuery first-timer haha!
How do you modify the code to have both text type and non-text type inputs turn red their borders?
Thank you!
Advertisement
Answer
You need to include the [type=”date”] control: .find('input[type="text"], input[type="date"])