我有一个 HTML 网页,允许用户输入多行数字。我需要添加验证检查以检查输入或更改的数字是否已存在于
table
中。
使用以下 jQuery 在
table
单击时将一行添加到 button
:
$('table tbody').append(
'<tr>' +
'<td>' +
'<input name="Associated Numbers" class="form-control telNumberInput"' +
' type="text" minlength="11" maxlength="11" placeholder="Enter telephone number" />' +
'<div name="tel-num-error-msg" class="text-danger" style="display: none"></div>' +
'</td>' +
'<td>' +
'<select name="Tel Number Action" class="form-control">' +
'<option value="" selected hidden>Select an option</option>' +
'<option value="One">Test 1</option>' +
'<option value="Two">Test 2</option>' +
'</select>' +
'</td>' +
'<td>' +
'<button name="del-tel-num-btn" class="btn btn-danger bin-icon" type="button">' +
'<i class="bi bi-trash3"></i>' +
'</button>' +
'</td>' +
'</tr>'
)
上面的代码工作正常,但我需要做的是在
blur
或 focusout
的 input
与 focus
上,我需要它来检查电话号码是否尚未列出,但我不能让它发挥作用。
这是我尝试过的所有代码,但它总是显示我的错误消息。
验证场景为:
table
inputs
值还是在新的空 input
中添加数字)初始
单击按钮
这是我一直在尝试使用的 jQuery,但每当我在
table
中有 2 行时,它就会放入我的 if
中并显示错误消息,即使电话号码尚未列出。
我尝试过使用
array
和各种 if
语句。这可能比我想象的要容易,但我陷入了困境并且“代码盲”并且无法想到正确执行此操作的代码。
$(document).on('focusout', 'input[name="Associated Numbers"]', function() {
// $(document).on('blur', 'input[name="Associated Numbers"]', function() {
const enteredNum = this.value
let rowCount = 0
let errorMsgTxt = ''
let existingNumbers = []
// let rowIndex = $(this).closest('#associated-num-tbl tbody tr').index()
// $('#associated-num-tbl tbody tr').each(function() {
// rowCount++
//
// // if (rowIndex !== $(this).index() && rowCount > 1) {
// if (rowCount > 1) {
// $(this).find('input').each(function () { //
// if (enteredNum === this.value && rowIndex !== $(this).index()) {
// errorMsgTxt = 'has already been added'
//
// return false
// }
// })
// }
// })
$('#associated-num-tbl tbody tr').each(function() {
rowCount++
$(this).find('input').each(function () {
existingNumbers.push(this.value)
})
})
if (rowCount > 1) {
$.each(existingNumbers, function (i, number) {
if (number === enteredNum && number !== '') {
// if (number === enteredNum) {
$(this).closest('tr').find($('div[name="assoc-num-error-msg"]')).text('Number has already been added').show(0, function () {
$(this).closest('td').find('input').trigger('focus')
})
return false
}
});
}
});
如您所见,表中不存在该数字。
所以解决方法是使用
index
。所以我得到了 table
的 row
index
input
的更改,然后在下面的 each
中,如果 index
与存储的变量 index
数字匹配,则忽略它
if (rowCount > 1) {
$.each(existingNumbers, function (i, number) {
if (number === enteredNum && i !== rowIndex) {
$(this).closest('tr').find($('div[name="assoc-num-error-msg"]')).text('Number ' + errorMsgTxt).show(0, function () {
$(this).closest('td').find('input').trigger('focus')
})
}
});
}
全面
JQuery
锻炼
$(document).on('blur', 'input[name="Associated Numbers"]', function() {
const enteredNum = this.value
let rowIndex = $(this).closest('#associated-num-tbl tbody tr').index()
let existingNumbers = []
let rowCount = 0
$('#associated-num-tbl tbody tr').each(function() {
rowCount++
$(this).find('input').each(function () {
if (this.value !== '') {
existingNumbers.push(this.value)
}
})
})
if (rowCount > 1) {
$.each(existingNumbers, function (i, number) {
if (number === enteredNum && i !== rowIndex) {
$(this).closest('tr').find($('div[name="assoc-num-error-msg"]')).text('Number ' + errorMsgTxt).show(0, function () {
$(this).closest('td').find('input').trigger('focus')
})
return false
}
})
}
})
我已经尝试过逻辑,代码如下所述。 在这里,我仅使用一个循环
.each
来查找重复项并在适当的 tr
上显示错误消息。或许对你有帮助。
$(document).on('blur', 'input[name="Associated Numbers"]', function() {
const enteredNum = this.value;
const rowIndex = $(this).closest('#associated-num-tbl tbody tr').index();
let isDuplicate = false;
$('#associated-num-tbl tbody tr').each(function() {
const inputValue = $(this).find('input[name="Associated Numbers"]').val();
if (inputValue && inputValue === enteredNum && $(this).index() !== rowIndex) {
isDuplicate = true;
return false; // Exit the loop on finding a duplicate
}
});
if (isDuplicate) {
$(this).closest('tr').find('div[name="tel-num-error-msg"]')
.text('Number has already been added')
.show(0, function() {
$(this).closest('td').find('input').trigger('focus');
});
} else {
$(this).closest('tr').find('div[name="tel-num-error-msg"]').hide();
}
});