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

Question

У меня есть DOM, в котором я хочу запретить пользователям вводить повторяющиеся записи при html вводе текста.

Вышеуказанное DOM не находится под контролем пользователя. Это приходит через php.

В данный момент я сосредоточен только на name="code[]".

Это то, что я пытался :

$(function(){

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

    var $current = $(this);

    $('input[name^="code"]').each(function() {
        if ($(this).val() == $current.val())
        {
            alert('Duplicate code Found!');
        }

    });
  });
});

Проблема Утверждение:

Мне интересно, какие изменения я должен внести в javascript код, указанный выше, чтобы при вводе повторяющегося кода появлялось предупреждающее сообщение «Найден повторяющийся код».

Answer 1

вам нужно добавить EventListener для каждого элемента, а не EventListener для всех. Затем посчитайте входные данные с одинаковым значением, если их больше 1, это дубликат.

Также игнорируйте незаполненные вводы.

Проверьте следующий фрагмент:

$('input[name*="code"]').each(function() { 
  $(this).change(function(){ 
    let value = $(this).val();
    let count = 0;
    $('input[name*="code"]').each(function() { 
      if ($(this).val() != '' && $(this).val() == value) {
        count++;
        if (count > 1) alert('duplicate');
      }
    });
  });
  $(this).addClass('e');
});


$('#createInput').on('click', function(){
  let newInput = document.createElement("input");
  newInput.name = 'code[]';
  newInput.type = 'text';
  newInput.className = 'whatever';
  $('#inputGroup').append(newInput);
  // repeat the eventlistener again:
    $('input[name*="code"]:not(.e').each(function() { 
      $(this).change(function(){ 
        let value = $(this).val();
        let count = 0;
        $('input[name*="code"]').each(function() { 
          if ($(this).val() != '' && $(this).val() == value) {
            count++;
            if (count > 1) alert('duplicate');
          }
        });
      });
      $(this).addClass('e');
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="inputGroup">
  <input name="code-1" type="text" class="whatever">
  <input name="code-2" type="text" class="whatever2">
  <input name="code-3" type="text" class="whatever3">
</div>
<input type="button" id="createInput" value="Add input">

Редактировать: теперь работает с динамически создаваемыми элементами. Класс 'e' работает как флаг, чтобы не вставлять 2 прослушивателя событий в один и тот же элемент узла, иначе они будут работать каскадно, вызывая нежелательное поведение.

Answer 2

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

function checkDuplicates(){
  var codes = $('input[name^="code"]').toArray().map(function(element){
    return element.value;
  })
  var duplicates = codes.some(function(element, index, self){
  	return element && codes.indexOf(element) !== index;
  });
  return duplicates;
}

function flagDuplicates(){
  var inputs = $('input[name^="code"]').toArray();
  var codes = inputs.map(function(element){
    return element.value;
  });
  var duplicates = 0;
  codes.forEach(function(element, index){
    var duplicate = element && codes.indexOf(element) !== index;
    if(duplicate){
    	inputs[index].style.backgroundColor = "red";
        inputs[codes.indexOf(element)].style.backgroundColor = "red";
        duplicates++
    }
  });
  return duplicates;
}

$('input[name^="code"]').on("change", function(){
	//var duplicates = checkDuplicates(); // use this if you only need to show if there are duplicates, but not highlight which ones
 	var duplicates = flagDuplicates(); // use this to flag duplicates
	if(duplicates){
  	alert(duplicates+" duplicate code(s)");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="code-1" type="text">
<input name="code-2" type="text">
<input name="code-3" type="text">