Добрый день! На форме html, есть поле input, которое по аналогии с элементов select представляет выпадающий список. Но отличие в том, что можно начать вводить текст в него и он найдет нужные элементы похожие. Вопрос в том, как сделать проверку на js, что если человек начал писать в нём, но не выбрал элемент из выпадающего списка, то поле подсветилось красным, а рядом комментарии. Пример, есть три позиции в списке: Иванов Петров Сидоров Если начать писать "Ива", то покажется один элемент, но если ты его не выберешь, а просто нажмёшь сохранить на форме, то в поле, так и останется значение Ива. HTML: <input name="street" list="character1" placeholder="Улица" class="col-sm-6 custom-select custom-select-sm"> <datalist id="character1"> <?php echo $zet->option_street(); ?> </datalist> Нашёл готовое решение, но почему-то ничего не происходит. Код (Javascript): // Поиск всех input-элементов в DOM, которые привязаны к datalist с помощью атрибута list. var inputs = document.querySelectorAll('input[list]'); for (var i = 0; i < inputs.length; i++) { // Когда значение input изменяется… inputs[i].addEventListener('change', function() { var optionFound = false, datalist = this.list; // Определение, существует ли option с текущим значением input. for (var j = 0; j < datalist.options.length; j++) { if (this.value == datalist.options[j].value) { optionFound = true; break; } } // используйте функцию setCustomValidity API проверки ограничений валидации // чтобы обеспечить ответ пользователю, если нужное значение в datalist отсутствует if (optionFound) { this.setCustomValidity(''); } else { this.setCustomValidity('Please select a valid value.'); } }); }
Код (Javascript): <form id="myform"> <input name="street" list="character1" placeholder="Улица" class="col-sm-6 custom-select custom-select-sm" required> <datalist id="character1"> <option value="Иванов"> <option value="Петров"> <option value="Сидоров"> </datalist> <p><input type="submit"></p> </form> <script> let form = document.getElementById("myform"); form.addEventListener("submit", function(evt) { let street = this.querySelector("input[name=street]"), character1 = this.querySelectorAll("#character1 option"), find = null; character1.forEach(function(element) { let val = element.value.toLowerCase(), str = street.value.toLowerCase(); if(str === val) { find = 1; } }); if( find !== 1) { evt.preventDefault(); } }); </script>