Делаю подсказки для input
<input type="url" pattern="[a-z0-9._:/]+[a-z0-9]" id="urla" >
<input type="text" pattern="[0-9]+" placeholder="87654321" id="number">
<div id="urla-div"></div><div id="number-div"></div>
и т.д.
(function() {
var input = document.getElementById('urla');
var form = document.getElementById('urla-div');
var elem = document.createElement('div');
elem.id = 'notify';
elem.style.display = 'none';
form.appendChild(elem);
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
elem.innerHTML = '<div class="alert alert-warning alert-dismissible fade show text-start" role="alert"> <strong>Адрес страницы</strong> может содержать только латинские буквы в нижнем регистре, цифры.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>';
elem.className = 'position-relative';
elem.style.display = 'block';
}
});
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
})();
(function() {
var input = document.getElementById('number');
var form = document.getElementById('number-div');
var elem = document.createElement('div');
elem.id = 'notify-4';
elem.style.display = 'none';
form.appendChild(elem);
input.addEventListener('invalid', function(event){
event.preventDefault();
if ( ! event.target.validity.valid ) {
elem.innerHTML = '<div class="alert alert-warning alert-dismissible fade show text-start" role="alert"> <strong>Яндекс Метрика</strong> Используйте только цифры, например, 87654321.<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div>';
elem.className = 'position-relative';
elem.style.display = 'block';
}
});
input.addEventListener('input', function(event){
if ( 'block' === elem.style.display ) {
input.className = '';
elem.style.display = 'none';
}
});
})();
В общем я под каждый input делаю скрипт, но наверняка, моно обойтись одним, где в
elem.innerHTML можно будет указать текст для каждого input по id. Кто знает как эту историю реализовать?
