рони,
То есть можно один раз указать элемент $(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>
то вывод ошибки будет простой операцией. Проверяются все обязательные поля, а также необязательные, но заполненные. В этом случае код будет компактным, легко расширяемым и не привязанный к конкретной форме, то есть им можно проверять любые поля любой формы. |
| Часовой пояс GMT +3, время: 09:21. |