JSFiddle - React, Tailwind, and code Playground

by kazabr

HTML

<label for="favorite_team">Любимая команда:</label>
<input type="text" name="team" id="favorite_team" list="team_list">
<datalist id="team_list">
    <option>Бавария</option>
    <option>Бенфика</option>
    <option>Боруссия</option>
    <option>Брюгге</option>
</datalist>
<br>
<label for="donation">Размер пожертвования (USD):</label>
<input type="range" name="donation" id="donation" list="donation_list" step="5" min="5" max="200">
<datalist id="donation_list">
    <option>25</option>
    <option>50</option>
    <option>100</option>
    <option>200</option>
</datalist>

JavaScript

// Валидация 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;
        
        for (var j=0; j<datalist.options.length; j++) {
            if (this.value == datalist.options[j].value) {
                optionFound = true;
                break;
            }
        }
        
        if (optionFound) {
            this.setCustomValidity('');
        } else {
            this.setCustomValidity('Пожалуйста введите корректное значение');
        }
    });
}