Косяки:
- разметка текстового поля - забыты закрывающие кавычки у атрибута
type
- синтаксическая ошибка: знак минус вместо присваивания
- синтаксическая ошибка: забыли закрывающую скобку в вызове
addEventListener
- забыли подключить jquery
- неправильно подключаете обработчик события
keyup - пытаетесь вызывать нативный метод у jquery объекта
- обрабатываемое событие неправильное - должно быть
input, а не keyup (потому что ввод с клавиатуры не является единственным способом отредактировать содержимое текстового поля)
- опечатка в имени атрибута: в js у вас -
data_toll, в css - data-toll (очевидно, это должен быть data-атрибут, т.е., символ подчёркивания - долой)
Исправляем:
const getTooltip = val =>
val < 3 ? 'Вводите только римские цифры XVI' :
val < 5 ? 'Смените раскладку языка на русский и продолжите ввод данных' :
val < 11 ? 'Вводите обычные цифры' :
'ЖОПА';
// вот jquery
$('.form-control').on('input', ({ target: { value: { length } } }) => {
$('.birth_certificate').attr('data-toll', getTooltip(length));
});
// а вот jquery катится к чёрту
document.querySelector('.form-control').addEventListener('input', function(e) {
this.dataset.toll = getTooltip(e.target.value.length);
}.bind(document.querySelector('.birth_certificate')));
