Не срабатывает keyup() при вставке значения в input чере контекстное меню “Вставить” , disabled НЕ удаляется. Как исправить?

114
28 ноября 2020, 02:00

Есть форма (код ниже). При вставке валидного значения в поле с помощью Ctrl+V все работает - кнопка submit становиться доступной. Если вставлять невалидное, то кнопка недоступна... То есть все работает правильно.

Однако если вставлять валидное значение через контекстное меню "Вставить" или в Firefox через подсказки (ранее вводимые заначения в input), то кнопка не становится активной.

Подскажите как исправить?

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

var errorEmail2 = true, errorName2 = true, checkBox2 = true; 
 
var ticketAuthor = $("#ticket-author"); // Автор 
var ticketAuthorEmail = $("#ticket-author-email"); // Email 
var tiketCheckBox = $("#pre_poll_choice"); 
 
 
var minNameVal = 2; // Минимальное количество символов в поле Имя 
var maxNameVal = 50; // Максиимальное количество символов в поле Имя 
var nameMinMax = [minNameVal,maxNameVal]; 
var patternName = "[a-zA-Zа-яёА-ЯЁ0-9_. -]{" + nameMinMax +"}"; 
 
var patternEmail = /[a-z\d-]+([\.\_]?[a-z\d-]+)+@[a-zа-я\d-]+(\.[a-zа-я]{2,6})/g; 
 
 
/* Проверка поля Имя */ 
ticketAuthor.keyup(function(){ 
  var value = $(this).val();   
  if(value == ""){ 
	$(this).removeClass("ok-textbox").addClass("err-textbox"); 
	$("#name_valid").css("display"," inline-block"); 
	$("#name_valid").html("Поле Имя пустое"); 
	errorName2 = true; 
  }else if (value != value.match(patternName)){ 
	$(this).removeClass("ok-textbox").addClass("err-textbox"); 
	$("#name_valid").css("display"," inline-block"); 
	$("#name_valid").html("От 2 до 50 символов. Только буквы, цифры и символы: <b>. – _</b>");	 
    errorName2 = true;	 
  }else{   
	  if (value.length >= minNameVal){ 
	  $("#name_valid").css("display"," none"); 
	  $("#name_valid").html("");	 
	  $(this).removeClass("err-textbox").addClass("ok-textbox"); 
	  $("#submit_valid").css("display"," none"); 
	  $("#submit_valid").html(""); 
	  errorName2 = false; 
	}   
  }   
}); 
 
 
/* Проверяем корректность E-mail */ 
ticketAuthorEmail.keyup(function(){ 
var value = $(this).val().trim(); 
 
if(value == ""){	   
	$("#email_valid").css("display"," inline-block"); 
	$("#email_valid").html("Поле Email нужно заполнить");   
	$(this).removeClass("ok-textbox").addClass("err-textbox");     
	errorEmail2 = true;	 
  }  
  else if(value != value.match(patternEmail)) { 
	$("#email_valid").css("display"," inline-block"); 
	$("#email_valid").html("Введите реальный Email"); 
    $(this).removeClass("ok-textbox").addClass("err-textbox"); 
    errorEmail2 = true;	 
  }  
  else{ 
	  $("#email_valid").css("display"," none"); 
	  $("#email_valid").html("");	 
	  $(this).removeClass("err-textbox").addClass("ok-textbox"); 
	  $("#submit_valid").css("display"," none"); 
	  $("#submit_valid").html(""); 
	  errorEmail2 = false; 
  } 
}); 
 
// Проверка чекбокса 
$(":checkbox").change(function(){ 
    if($(this).prop("checked")){ 
      $(this).val("on"); 
	  $("#checkbox_valid").css("display"," none"); 
	  $("#checkbox_valid").html("");	 
	  $(this).removeClass("err-textbox").addClass("ok-textbox"); 
	  $("#submit_valid").css("display"," none"); 
	  $("#submit_valid").html("");	  	   
	  checkBox2 = false;		   
    }else{ 
		$(this).val("off"); 
		$("#checkbox_valid").css("display"," inline-block"); 
		$("#checkbox_valid").html("Вы не дали согласие на обработку персональных данных");   
		$(this).removeClass("ok-textbox").addClass("err-textbox"); 
		checkBox2 = true;	   
	}     
}); 
 
 
// Если все поля валидны, делаем кнопку доступной 
$(document).keyup("input", function(){ 
if(!(errorEmail2 || errorName2)){ 
$("#submit").removeAttr("disabled");	 
}else{ 
$("#submit").attr("disabled", "disabled");	 
}	   
 
}); 
 
 
// В результате клика по кнопке отправить если ошибок заполнения нет то форма отправляется иначе получаем сообщение об ошибке 
$("#submit").click(function (){	   
 
  var chBox = tiketCheckBox.val().trim(); 
 
// проверка на наличие ошибок 
if (errorEmail2 || errorName2 || checkBox2){ 
 
  if(chBox != "on"){ 
	$("#checkbox_valid").css("display"," inline-block"); 
	$("#checkbox_valid").html("Вы не дали согласие на обработку персональных данных"); 
		tiketCheckBox.removeClass("ok-textbox").addClass("err-textbox");				 
  }   
 
$("#submit_valid").css("display"," block"); 
$("#submit_valid").html("Ошибки в полях!");	 
	 
	// блокировка отправки формы 
	return false; 
	 
  }else{ 
    $("#submit_valid").css("display"," none"); 
	$("#submit_valid").html(""); 
	console.log("Ошибок нет, форма отправляется!"); 
  }  	   
});
label{display:none} 
 
 
 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 
}
<!-- форма --> 
<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="Ваше имя" maxlength="50" value="" required>  
</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" maxlength="50" 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>

READ ALSO
Запись содержимого файла в переменную JavaScript

Запись содержимого файла в переменную JavaScript

мне нужна помощьЕсть JS функция:

112
ПРостой секундомер на Javascript

ПРостой секундомер на Javascript

Сделал секундомер на JavaScriptПочему-то минуты отсчитываются чуть быстрей, чем секунды

168
Как обратится через js к css

Как обратится через js к css

есть вот такой элемент #m151 в css как к нему обратится через js? и передать параметр none

112