[ozoro]

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

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

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

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

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

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


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


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



1 вариант:

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


<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>

<script>
$(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');
});
</script>

2 вариант:

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


<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>

<script>
$(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');
});
</script>