setInterval / setTimeout / clearInterval - Валидация поля - Нужна помощь по поводу ОСТАНОВКИ ТАЙМЕРА после “Вставки” значения через контекстное меню

111

27 ноября 2020, 22:20

Событие keyup - пока печатается всё с клавиатуры - всё хорошо. Пользователь вводит текст, обработчик проверяет на правильность и если что-то неправиьлно - меняет стиль поля, показывая что есть ошибка. Даже когда посетитель вставляет содержимое из буфера обмена комбинациями клавиш (Ctrl+V или Shift+Insert), обработчик нормально реагирует. Когда же вставляем из контекстного меню, то обработчик не работает.

Сделал на setInterval / setTimeout / clearInterval два варианта кода, но есть проблема в обоих!

1-вариант работает как надо, если вставить через контекстное меню валидное значение в поле, то сразу же меняется стиль на валидный, ОДНАКО таймер как до, так и после продолжает считать.

2-вариант после вставки значения в поле через контекстное меню и даже с помощью (Ctrl+V или Shift+Insert) нужно снять фокус (кликнуть ВНЕ поля). Счетчик при смене классов считает один раз.

Задумка, чтобы до вставки и после таймер выполнялся один раз, а клас менялся сразу после вставки валидного значения или не менялся, если значение невалидно. То есть как в первом варианте, только таймер при смене класса выполнялся один раз.

Помогите подправить!

Заранее, благодарю!

Ниже два варианта кода.

1 вариант:

$(function(){ 
    var isCorrectName=function() { 
        if (/^[a-zA-Z_0-9 ]/.test(this.value)) { 
            $(this).removeClass('text-error-input'); 
			console.log("Класс text-error-input - УДАЛЕН - поле ВАЛИДНО"); // для тестирования  
        } else { 
            $(this).addClass('text-error-input'); 
			console.log("Класс text-error-input - УСТАНОВЛЕН - поле НЕВАЛИДНО"); // для тестирования 
        } 
    } 
    var changeFieldNameTimeout=null; 
 
 
 
    $("#changeFieldName").change(function() { 
         
            changeFieldNameTimeout=setInterval(function() { 
                isCorrectName.call(document.getElementById('changeFieldName')); 
            }, 500);             
    }).trigger('change'); 
});

.text-error-input { 
    border: 1px red solid !important; 
    background: #FFB647 !important; 
}

<input type="text" id="changeFieldName" name="changeFieldName" value="name1" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

2 вариант

$(function(){ 
    var isCorrectName=function() { 
        if (/^[a-zA-Z_0-9 ]/.test(this.value)) { 
            $(this).removeClass('text-error-input'); 
			console.log("Класс text-error-input - УДАЛЕН - поле ВАЛИДНО"); // для тестирования  
        } else { 
            $(this).addClass('text-error-input'); 
			console.log("Класс text-error-input - УСТАНОВЛЕН - поле НЕВАЛИДНО"); // для тестирования 
        } 
    } 
    var changeFieldNameTimeout=null; 
 
 
 
    $("#changeFieldName").change(function() { 
         
            changeFieldNameTimeout=setInterval(function() { 
                isCorrectName.call(document.getElementById('changeFieldName')); 
            }, 500); 
         
            	setTimeout(function() { 
				  clearInterval(changeFieldNameTimeout);			   
				}, 500); 
         
    }).trigger('change'); 
});

.text-error-input { 
    border: 1px red solid !important; 
    background: #FFB647 !important; 
}

<input type="text" id="changeFieldName" name="changeFieldName" value="name1" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer 1

Может вот это поможет:

document.querySelectorAll('input') 
        .forEach(i => i.onkeyup = i.onpaste = i.onchange = () => validate(i)); 
 
function validate(field) { 
  setTimeout(() => field.classList.toggle('invalid', /[0-9]/.test(field.value))) 
}