Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.05.2019, 22:01
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

Нужна помощь - 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, 04.05.2019 в 22:18.
Ответить с цитированием
  #2 (permalink)  
Старый 04.05.2019, 22:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ozoro,
а так?
$("#changeFieldName").on("input", isCorrectName);
Ответить с цитированием
  #3 (permalink)  
Старый 04.05.2019, 22:59
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

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

Можешь еще подсказать, как в этой одной функции добавить таймер еще на одно поле, например - 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, 04.05.2019 в 23:06.
Ответить с цитированием
  #4 (permalink)  
Старый 04.05.2019, 23:09
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ozoro,
не понимаю, зачем вам таймеры?
Ответить с цитированием
  #5 (permalink)  
Старый 04.05.2019, 23:23
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

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

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

Последний раз редактировалось ozoro, 04.05.2019 в 23:25.
Ответить с цитированием
  #6 (permalink)  
Старый 04.05.2019, 23:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #7 (permalink)  
Старый 04.05.2019, 23:59
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

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

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

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

Последний раз редактировалось ozoro, 05.05.2019 в 00:02.
Ответить с цитированием
  #8 (permalink)  
Старый 05.05.2019, 00:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

ozoro,
замените "blur" на "input" и посмотрите https://jqueryvalidation.org/validate/
Ответить с цитированием
  #9 (permalink)  
Старый 05.05.2019, 00:59
Аватар для ozoro
Аспирант
Отправить личное сообщение для ozoro Посмотреть профиль Найти все сообщения от ozoro
 
Регистрация: 04.05.2019
Сообщений: 80

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

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


Я так проверяю поля:
var value = $(this).val().trim();
if(value == value.match(patternEmail) || value == value.match(patternName)){
// что-то делаю
}
Ответить с цитированием
  #10 (permalink)  
Старый 05.05.2019, 10:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от ozoro
Хотя после точки от 2 до 6 букв должно быть
сам патерн не ограничен ничем /^ .....$/
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Нужна помощь nimens Общие вопросы Javascript 15 30.11.2010 15:38
Как создать таймер, как на Letitbit? free_style Javascript под браузер 1 01.07.2010 17:55
нужна помощь dominosoko Серверные языки и технологии 4 14.03.2010 02:17
clearInterval и setInterval из разных локаций. Bakuryu Events/DOM/Window 6 27.07.2008 22:45
Очень простой как даже по мне вопрос по поводу setTimeout & setInterval Хранитель Света Общие вопросы Javascript 5 12.07.2008 20:34