检查输入的数字是否已经在JQuery表中

Question

我有一个

HTML

网页，允许用户输入多行数字。我需要添加验证检查以检查输入或更改的数字是否已存在于

table

中。

使用下面的

table

 单击 

button

 上的 

JQuery

添加一行

$('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

上，我需要它来检查电话号码是否尚未列出，但我不能让它发挥作用。

这是我尝试过的所有代码，但它总是显示我的错误消息。

验证场景为：

1. 它有不止一行

   table

2. 已更改的输入（无论是更新现有的

   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
            }
        });
    }
});

如您所见，表格中不存在该数字

Answer 1

所以解决方法是使用

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
         }
      })
    }
})