Нужна помощь - setInterval / setTimeout / clearInterval - КАК ОСТАНОВИТЬ ТАЙМЕР?
 

Событие 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>

ozoro,
а так?

$("#changeFieldName").on("input", isCorrectName);

рони,
Приогромнейше благодарю, второй вариант заработал как надо.

Можешь еще подсказать, как в этой одной функции добавить таймер еще на одно поле, например - Email?

Однако мне надо удалять еще и disabled с submit. На одно поле сделал. Но получается, что одно валидное, а другое нет и submit доступен.
А надо сделать так, чтобы вставка в одно поле валидного значения добавляло ему валидный класс, но если второе невалидное, то disabled бы не удалялся. И удалялся только тогда, когда оба поля валидные.

Например такое поле:

<input type="email" name="email_author_vo" id="ticket-author-email" class="form-control input__no-radius" placeholder="Ваш Email" value="">

с таким паттерном:

var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6})/g;

ozoro,
не понимаю, зачем вам таймеры?

рони,
А как сделать так, чтобы при вставке валидного значения через контекстное меню, поле становилось валидным. Только еще нюанс, это часть кода и то тестового, остальной код проверяет на null - выводит сообщения, на потерю фокуса и т.д....
Могу прислать файлы всего проекта в личку или на email/скайп...

Буду признателен за помощь в минимизации кода, а то чувствую, возможно говнокод какой-то у меня.

ozoro,

<!DOCTYPE html>

<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">

</head>

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

<form action="http://">
<input type="text" id="changeFieldName" name="changeFieldName" value="" />
<input type="email" name="email_author_vo" id="ticket-author-email" class="form-control input__no-radius" placeholder="Ваш Email" value="">
<input name="" type="submit" value="send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script>
$(function(){
    var isCorrectName=function() {
        $(this).toggleClass('text-error-input', !/^[a-zA-Z_0-9 ]/.test(this.value));

    }
   $("#changeFieldName").on("input", isCorrectName);

   var isCorrectEmail=function() {
        var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6})/g;
        $(this).toggleClass('text-error-input', !patternEmail.test(this.value));

    }
   $("#ticket-author-email").on("blur", isCorrectEmail);

   $("form").submit(function() {
   $("#changeFieldName").trigger("input");
   $("#ticket-author-email").trigger("blur");
   return !$(".text-error-input").length
})

});
</script>

</body>
</html>

рони,
Благодарю, буду осмысливать, но думаю, не совсем то, что нужно. Нужно чтобы при вставке валидного значения (именно через контекстное меню) поле СРАЗУ становилось валидным (а не при потере фокуса). А здесь только при потере фокуса, то есть клике за полем.

Так что, думаю, без таймеров не обойтись... может я ошибаюсь?

Может все же лучше скину файлы, там будет понятна общая картина, что я хочу сделать.
Здесь не реально все опубликовать. Хотя можно попробовать...

ozoro,
замените "blur" на "input" и посмотрите https://jqueryvalidation.org/validate/

рони,
да сейчас работает, однако email как-то не так валидируется..., например, вот такой email, валидный получается:
Хотя после точки от 2 до 6 букв должно быть, а больше, уже невалидно...

Вот здесь ранее публиковал часть проекта.
Може понятнее станет, что хочу.


Я так проверяю поля:

var value = $(this).val().trim();
if(value == value.match(patternEmail) || value == value.match(patternName)){
// что-то делаю
}

сам патерн не ограничен ничем /^ .....$/