Нужна помощь - 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, валидный получается: Цитата:
Вот здесь ранее публиковал часть проекта. Може понятнее станет, что хочу. Я так проверяю поля:
var value = $(this).val().trim();
if(value == value.match(patternEmail) || value == value.match(patternName)){
// что-то делаю
}
|
Цитата:
|
рони,
Разобрался, вроде ве работает правильно, поле имя и email валидируется как надо, только не пойму как удалить disabled. Надо чтобы изначально кнопка была НЕактивной, после того как все поля становятся валидными, кнопка должна становиться активной. Однако если опять поле сделать невалидным, то кнопка опять должна становиться неактивной. Не пойму как сделать это. Пробовал так, но ничего не получается:
<!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 method="get">
<input type="text" name="author_vo" id="ticket-author" class="form-control input__no-radius" placeholder="Ваше имя" maxlength="50" 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" id="submit" value="send" disabled="disabled">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
var patternName = /^([a-zA-Zа-яёА-ЯЁ0-9_. -]{2,6}$)/;
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
$(function(){
var isCorrectName=function() {
$(this).toggleClass('text-error-input', !patternName.test(this.value));
}
$("#ticket-author").on("input", isCorrectName);
var isCorrectEmail=function() {
$(this).toggleClass('text-error-input', !patternEmail.test(this.value));
if(patternName.test(this.value) && patternEmail.test(this.value)){
$("#submit").removeAttr("disabled");
console.log("disabled - УДАЛЕН");
}else{
$("#submit").attr("disabled", "disabled");
console.log("disabled - НА МЕСТЕ");
}
}
$("#ticket-author-email").on("input", isCorrectEmail);
$("form").submit(function() {
$("#ticket-author").trigger("input");
$("#ticket-author-email").trigger("input");
return !$(".text-error-input").length
})
});
</script>
</body>
</html>
|
ozoro,
var patternName = /^([a-zA-Zа-яёА-ЯЁ0-9_. -]{2,6}$)/;
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
$(function(){
var isCorrectName=function() {
$(this).toggleClass('text-error-input', !patternName.test(this.value));
disabledSend();
}
$("#ticket-author").on("input", isCorrectName);
var isCorrectEmail=function() {
$(this).toggleClass('text-error-input', !patternEmail.test(this.value));
disabledSend();
}
$("#ticket-author-email").on("input", isCorrectEmail);
function disabledSend()
{
$("#submit").prop("disabled", $(".text-error-input").length||!$("#ticket-author").val().trim()||!$("#ticket-author-email").val().trim());
}
$("form").submit(function() {
$("#ticket-author").trigger("input");
$("#ticket-author-email").trigger("input");
return !$(".text-error-input").length
})
});
|
рони,
Огромная благодарность за быструю и четкую помошь! |
рони,
Заметил один момент. Если поля становятся валидными, то кнопка становится активной. Но если после того как кнопка стала активной поле сделать невалидным, НО не пустым, то кнопка продолжает оставаться активной. Однако если поле сделать пустым, то кнопка становится неактивной. Как это исправить? То есть, чтобы в любом случае если одно из полей становится невалидно, то кнопка тоже должна быть неактивной. |
рони,
А все, извиняюсь, это я накосячил. Поменял класс, то есть сделал два класса .err-textbox .ok-textbox а в вот здесь:
$("#submit").prop("disabled", $(".err-textbox").length||
забыл поменять |
рони,
Единственное, подскажи еще один момент, если при валидном поле добавлять, а не при НЕвалидном удалять классы, то это можно сделать только так:
$(this).toggleClass('err-textbox', !patternName.test(this.value));
$(this).toggleClass('ok-textbox', patternName.test(this.value));
или есть решение поизящнее? |
Цитата:
var ok = patternName.test(this.value);
$(this).toggleClass('err-textbox', !ok)
.toggleClass('ok-textbox', ok);
|
Цитата:
|
рони,
То есть фактически это одно и тоже, если вот так записать:
$(this).toggleClass('err-textbox', !patternName.test(this.value)).toggleClass('ok-textbox', patternName.test(this.value));
только сокращается число знаков, так как значение patternName.test(this.value) переменной ok присваиваем, а также остается только один $(this) - элемент, который указываетс только в начале. |
Цитата:
|
рони,
То есть можно один раз указать элемент $(this).что-то и дальше просто указывать .что-то .что-то еще .и еще что-то |
Цитата:
|
|
рони,
Не подскажешь еще:
var ok = patternName.test(this.value);
$(this).toggleClass('err-textbox', !ok)
.toggleClass('ok-textbox', ok);
Это удаление или добавление классов в зависимости от true или false. А есть ли конструкции наподобие toggleClass(), чтобы также в зависимости от значения переменной (true или false) добавлять/удалять текст, а также менять стили, например: display:inline-block или display:none например, для замены такой громоздкой конструкции if(){}else{}
if($(this).is(ticketAuthor) && !patternName.test(this.value)){
$(this).removeClass("ok-textbox").addClass("err-textbox");
$("#name_valid").css("display"," inline-block")
.html("От 2 до 50 символов. Только буквы, цифры и символы: <b>. – _</b>");
}else{
$(this).removeClass("err-textbox").addClass("ok-textbox");
$("#name_valid").css("display"," none").html("");
}
|
Метод .toggleClass() и добавляет, и удаляет. Если указанный в методе класс есть, то он будет удален, иначе добавлен. А вот второй параметр призван уточнить действие, то есть или только добавлять (true), или только удалять (false). Если у объекта, к примеру, по умолчанию установлен класс "ok-textbox", то два метода removeClass и addClass можно заменить одним - .toggleClass("ok-textbox err-textbox"), который будет последовательно переключать эти два класса.
Что касается сокращения кода, описать то можно, но короче от этого он не станет, мешает действие .html(). Кстати, html(""), это тоже самое что и $(object).empty(). |
laimas,
Меня в основном интересует минимизация таких конструкций:
if($(this).is(ticketAuthor) && !patternName.test(this.value)){
$("#name_valid").css("display"," inline-block")
.html("От 2 до 50 символов. Только буквы, цифры и символы: <b>. – _</b>");
}else{
$("#name_valid").css("display"," none").html("");
}
Если просто удалить класс у селектора #name_valid, то пространство под него остается, нужно сделать еще display: none чтобы пространство было удалено. А также интересует как удалить html. И все это сделать без if, примерно так, как делает конструкция toggleClass(), реагируя на rtue или false. К примеру вот такая функция как ее оптимизировать (минимизировать - сделать без if):
<!doctype html>
<html lang="ru">
<head>
<title>Форма в 2 шага</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="styles_min.css">
<link rel="stylesheet" href="vo-style2.css">
<style>
.ticket-form-vo{
max-width: 600px;
margin: 0 auto;
}
textarea:focus,
input:focus,
button:focus
{outline:0!important;}
.err-textbox {
box-shadow: 0 0 7px rgb(255,0,0);
}
.err-textbox:not(checked) + label::before{
box-shadow: 0 0 7px rgb(255,0,0);
}
.ok-textbox {
box-shadow: 0 0 3px rgb(124,245,124);
}
#pagetitle_valid,#editor_valid,#name_valid,#email_valid,#checkbox_valid,#submit_valid{
display:none;
/* display: inline-block; */
padding: 1px 5px 5px;
color: red;
font-size: 12px;
}
.form-group b {
font-size: 16px;
background: #f5dfdf;
padding: 0px 5px;
display: inline-block;
}
input#submit:disabled,input#submit[disabled]:hover,
button#pre_submit:disabled,button#pre_submit[disabled]:hover
{
background: #cecaca!important;
color: #999!important;
box-shadow: none!important;
-webkit-box-shadow: none!important;
-moz-box-shadow: none!important;
border: 2px solid #ccc!important;
cursor: text
}
</style>
</head>
<body>
<!-- форма -->
<form action="" method="get" id="ticketForm" class="well create">
<div class="form-group">
<span id="name_valid"></span>
<label for="ticket-author">Имя</label><span class="error"></span>
<input type="text" name="author_vo" id="ticket-author" class="form-control input__no-radius" placeholder="Ваше имя" minlength="2" maxlength="50" value="">
</div>
<div class="form-group">
<span id="email_valid"></span>
<label for="ticket-author-email">Ваш Email</label><span class="error"></span>
<input type="email" name="email_author_vo" id="ticket-author-email" class="form-control input__no-radius" placeholder="Ваш Email" value="">
</div>
<span id="checkbox_valid"></span>
<div style="float:left;">
<input class="form-control radio_poll" type="checkbox" id="pre_poll_choice" name="pre_poll_choice" value="off">
<label for="pre_poll_choice" style="margin-top: 10px;">Даю согласие на обработку <a href="#" target="_blank" rel="noopener noreferrer">персональных данных</a></label>
</div>
<div class="form-actions row">
<div class="move-right"><span id="submit_valid"></span>
<input type="submit" class="more buttons blue" name="draft" id="submit" value="Отправить" disabled="disabled">
</div>
</div>
</form><!-- / форма -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(function(){
var ticketAuthor = $("#ticket-author"); // Автор
var ticketAuthorEmail = $("#ticket-author-email"); // Email
var tiketCheckBox = $("#pre_poll_choice");
var minNameVal = $("#ticket-author").attr("minlength"); // Минимальное количество вводимых символов в поле Имя
var maxNameVal = $("#ticket-author").attr("maxlength"); // Максиимальное количество вводимых символов в поле Email
var nameMinMax = [minNameVal,maxNameVal]; // минимальное и максимальное количество символов в поле Имя
var patternName = new RegExp("^([a-zA-Zа-яёА-ЯЁ0-9_. -]{" + nameMinMax + "})$");
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6}$)/;
// Функция проверки полей при потере фокуса
var checkNull2 = function(){
$(this).val($(this).val().trim());
if ($(this).val() =="") {
if($(this).is(ticketAuthor)){
$("#name_valid").css("display"," inline-block").html("Поле \"Имя\" не должно быть пустое");
$(this).removeClass("ok-textbox").addClass("err-textbox");
}
if($(this).is(ticketAuthorEmail)){
$("#email_valid").css("display"," inline-block").html("Поле \"Email\" не должно быть пустое");
$(this).removeClass("ok-textbox").addClass("err-textbox");
}
disabledSend();
}else{
if($(this).is(ticketAuthor) && !patternName.test(this.value)){
$(this).removeClass("ok-textbox").addClass("err-textbox");
$("#name_valid").css("display"," inline-block")
.html("От " + minNameVal + " до " + maxNameVal + " символов. Только буквы, цифры и символы: <b>. – _</b>");
disabledSend();
}else if($(this).is(ticketAuthor) && patternName.test(this.value)){
$(this).removeClass("err-textbox").addClass("ok-textbox");
$("#name_valid").css("display"," none").html("");
disabledSend();
}
if($(this).is(ticketAuthorEmail) && !patternEmail.test(this.value)){
$(this).removeClass("ok-textbox").addClass("err-textbox");
$("#email_valid").css("display"," inline-block").html("Введите реальный Email");
disabledSend();
}else if($(this).is(ticketAuthorEmail) && patternEmail.test(this.value)){
$(this).removeClass("err-textbox").addClass("ok-textbox");
$("#email_valid").css("display"," none").html("");
disabledSend();
}
}
};
/* Проверяем значения полей Имя и Email в момент когда они теряют фокус */
$("#ticket-author").focusout(checkNull2);
$("#ticket-author-email").focusout(checkNull2);
// Функции в реальном времени
var isCorrectName=function() {
var ok = patternName.test(this.value);
$(this).toggleClass("psevdo-err", !ok).toggleClass("ok-textbox", ok);
if(ok){
$("#name_valid").css("display"," none").html("");
}
disabledSend();
}
$("#ticket-author").on("input", isCorrectName);
var isCorrectEmail=function() {
var ok = patternEmail.test(this.value);
$(this).toggleClass("psevdo-err", !ok).toggleClass("ok-textbox", ok);
if(ok){
$("#email_valid").css("display"," none").html("");
}
disabledSend();
}
$("#ticket-author-email").on("input", isCorrectEmail);
// END Функции в реальном времени
// Проверка чекбокса
$(":checkbox").change(function(){
if($(this).prop("checked")){
$(this).val("on");
$("#checkbox_valid").css("display"," none").html("");
$(this).removeClass("err-textbox").addClass("ok-textbox");
$("#submit_valid").css("display"," none").html("");
disabledSend();
}else{
$(this).val("off");
$("#checkbox_valid").css("display"," inline-block").html("Вы не дали согласие на обработку персональных данных");
$(this).removeClass("ok-textbox").addClass("err-textbox");
disabledSend();
}
});
// Проверка всех полей, если все поля заполнены верно, то удаляем disabled
function disabledSend() {
$("#submit").prop("disabled", $(".psevdo-err").length||!$("#ticket-author").val().trim()||!$("#ticket-author-email").val().trim()||$(":checkbox").val()!="on");
}
// Отправляем форму
$("form").submit(function() {
$("#ticket-author").trigger("input");
$("#ticket-author-email").trigger("input");
return !$(".psevdo-err").length
})
});
</script>
</body>
</html>
Вроде все работает, однако интересует сама возможность минимизации. |
Цитата:
Цитата:
|
Цитата:
|
рони,
Цитата:
|
ozoro, изменяйте подход к проверке, обрабатывая поля формы в цикле соответствующим правилом/фильтром.
По большому счету из всего богатства полей, что сейчас возможны в форме, по типу данных их не так и много, это строковые, числовые и булевы значения (флажки), и плюс наборы (группы радио кнопок и списки). Все текстовые поля могут иметь правила описанные рег. выражением, и не важно имя ли поле содержит, адрес электронной почты или пароль, номер телефона и прочее. Дополнительными условиями могут быть минимальные и максимальные значения для числовых полей. Поля также должны содержать в атрибутах сообщение об ошибке заполнения поля и обязательно ли оно для проверки, тип фильтра проверки: string, number, float, boolean, set. А далее в цикле обходом полей отправляем значение поля для проверки в соответствующий фильтр, где при наличии у поля шаблона рег. выражения производится проверка по нему, или по иным параметрам согласно атрибутам. Проверка должна возвращать treu/false, соответственно не показывается или показывается сообщение об ошибки извлеченное из атрибута. При этом, если элементы отображающие ошибки не будут иметь жесткой привязки и не разбросаны по форме как придется:
<div class="form-group">
<span id="email_valid"></span>
.....
<span id="checkbox_valid"></span>
<div style="float:left;">
вот таким образом
<div class="form-group">
<span class="error"></span>
то вывод ошибки будет простой операцией. Проверяются все обязательные поля, а также необязательные, но заполненные. В этом случае код будет компактным, легко расширяемым и не привязанный к конкретной форме, то есть им можно проверять любые поля любой формы. |
laimas,
А можешь привести пример валидации описанным способом, например, двух полей и чекбокса. 1 поле email или телефон (обязательное); 2 поле textarea (необязательное); 3 чекбокс (обязательно) |
| Часовой пояс GMT +3, время: 20:46. |