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>
Вроде все работает, однако интересует сама возможность минимизации.