Проверка дублирующего ввода с помощью этой простой функции JavaScript

Это моя html форма, обернутая в таблицу:

<tbody id="table_one">
<tr><td><input type="text" size="11" maxlength="11" id="mcode1" name="matnr[]"></td></tr>
<tr><td><input type="text" size="11" maxlength="11" name="matnr[]" id="mcode2" ></td></tr>
<tr><td><input type="text" size="11" maxlength="11" name="matnr[]" id="mcode3" ></td></tr>
<tr><td><input type="text" size="11" maxlength="11" name="matnr[]" id="mcode4" ></td></tr>
<tr><td><input type="text" size="11" maxlength="11" name="matnr[]" id="mcode5" ></td></tr>
<tr><td><input type="text" size="11" maxlength="11" name="matnr[]" id="mcode6" ></td></tr>
</tbody>

 

Функция на javascript, которая каждый раз, когда я буду вводить что-то в поле ввода с именем matnr[],
она будет проверять значение, если оно уже есть в любом из полей ввода с именем matnr[]. если оно там после ввода
, она покажет предупреждение, что "дублирование matnr не разрешено".

function checkForDuplicates() {
  // Get all the input fields with name "matnr[]"
  var inputFields = document.getElementsByName("matnr[]");
  
  // Create an array to store the values of the input fields
  var values = [];
  
  // Loop through the input fields and add their values to the values array
  for (var i = 0; i < inputFields.length; i++) {
    values.push(inputFields[i].value);
  }
  
  // Check if there are any duplicates in the values array
  for (var i = 0; i < values.length; i++) {
    if (values.indexOf(values[i]) !== values.lastIndexOf(values[i])) {
      // If there is a duplicate, show an alert
      alert("Duplicate matnr not allowed");
      break;
    }
  }
}

Вы можете вызывать эту функцию каждый раз, когда вы вводите что-то в поле ввода matnr[], добавив слушатель события onblur к каждому полю ввода. Вот пример того, как это можно сделать:

<input type="text" size="11" maxlength="11" name="matnr[]" id="mcode1" onblur="checkForDuplicates()">

Вот та же функция, которую я написал на jQuery:

function checkForDuplicates() {
  // Get all the input fields with name "matnr[]"
  var inputFields = $('[name="matnr[]"]');
  
  // Create an array to store the values of the input fields
  var values = [];
  
  // Loop through the input fields and add their values to the values array
  inputFields.each(function() {
    values.push($(this).val());
  });
  
  // Check if there are any duplicates in the values array
  for (var i = 0; i < values.length; i++) {
    if (values.indexOf(values[i]) !== values.lastIndexOf(values[i])) {
      // If there is a duplicate, show an alert
      alert("Duplicate matnr not allowed");
      break;
    }
  }
}

Вы можете вызвать эту функцию так же, как и в предыдущем примере, используя событие oninput или onblur.

$('[name="matnr[]"]').on('blur', checkForDuplicates);