Запретить повторяющиеся записи в текстовом поле

Question

Я бы хотел, чтобы в текстовое поле не вводились повторяющиеся записи. Я попытался с помощью следующего кода, но он всегда выбирает текущее значение и не совпадает с тем, который сохранен в предыдущем текстовом поле. Мои HTML-коды генерируются динамически, поэтому я думаю, что это может быть проблемой.

HTML

<input type="text" class="form-control" id="serialNumber" class="seiralNumberValue" />

JQuery

        // Restrict Duplicate Serial Number in TextBox 

        $(document).on('blur', '.seiralNumberValue', function () {
            var currentValue = $(this).val();
           var currentId = $(this).attr('id', 'currentValue');
            console.log(currentValue);

            $(".deviceSerialNumber").each(function () {
                if ($(this).val() == currentValue && $(this).attr('id') == currentId) {
                    console.log("Duplicate Serial Number found");
                }
            });

        });

Answer 1

Эта строка кода:

var currentId = $(this).attr('id', 'currentValue'); 

приводит к тому, что ваш метод не работает. Он устанавливает id элемента ввода на текущее значение, но инструкция jQuery не возвращает id. По сути, ваши currentValue и currentId содержат одно и то же значение, поэтому мы можем затем полностью удалить переменную currentId.

---

Пример:

$(".serialNumberValue").blur(function() {
  var currentValue = $(this).val();
  $(this).attr('id', currentValue);

  $(".deviceSerialNumber").each(function() {
    if ($(this).val() == currentValue && $(this).attr('id') == currentValue) {
      console.log("Duplicate Serial Number found");
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="hidden" id="23df4" class="deviceSerialNumber" value="23df4" />
<input type="hidden" id="abc1f" class="deviceSerialNumber" value="abc1f" />
<input type="hidden" id="dj54g" class="deviceSerialNumber" value="dj54g" />
<input type="hidden" id="l7h34" class="deviceSerialNumber" value="l7h34" />
<input type="hidden" id="h56hg" class="deviceSerialNumber" value="h56hg" />


<input type="text" class="form-control serialNumberValue" id="serialNumber" />

Answer 2

$(function(){

$('input[name^="text"]').change(function() {

    var $current = $(this);

    $('input[name^="text"]').each(function() {
        if ($(this).val() == $current.val() && $(this).attr('id') != $current.attr('id'))
        {
            alert('duplicate found!');
        }

    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myForm" id="myForm">
      <input type="text" name="text1" id="text1">
      <input type="text" name="text2" id="text2">
      <input type="text" name="text3" id="text3">
      <input type="text" name="textn" id="textn">

</form>

Проверьте это. Я думаю, что это помогает вашей цели

Всякий раз, когда пользователь вводит что-то в текстовое поле, JQuery просматривает все текстовые поля в форме и сравнивает их значения со значением, которое только что ввел пользователь, если дублирующее значениенайден, затем предупредить пользователя.