Как избежать повторения в jQuery

Question

Я писал некоторую пользовательскую проверку jQuery для формы и обнаружил, что пишу одни и те же элементы несколько раз.Я мог бы действительно использовать некоторую помощь, чтобы быть более «СУХИМ», если это возможно.Я включил приведенный ниже пример, если кто-то может указать мне правильное направление, я был бы очень признателен.

<div class="first-name-wrapper">
    <label for="first_name">First Name:</label>
    <input class="first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg first-name-error hide">
        <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
    </div>
</div>
<div class="last-name-wrapper">
    <label for="last_name">Last Name:</label>
    <input class="last-name" type="text" name="last_name" id="last_name">
    <div class="validation-msg last-name-error hide">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
</div>

$('.first-name').on('input', function () {
    if($('.first-name').val() != "") {
        $('.first-name-wrapper').removeClass('has-error');
        $('.first-name-error').addClass('hide');
    }
});
//last name
$('.last-name').on('input', function () {
    if($('.last-name').val() != "") {
        $('.last-name-wrapper').removeClass('has-error');
        $('.last-name-error').addClass('hide');
    }
});

По сути, все, что это делает, это проверяет, что, когда на входе есть что-то набранное, ононаходит содержащую оболочку, удаляет класс has-error и скрывает сообщение проверки, если ввод не пустой.

Answer 1

Вы должны делегировать свою логику функции.Что-то вроде:

let validateInput = (el) => {
    if(el.target.value != ""){
        $(el.target.className + "-wrapper").removeClass("has-error");
        $(el.target.className + "-error").addClass("hide");

        //Alternatively ES6 syntax which is less error prone:
        $(`${el.target.className}-wrapper`).removeClass("has-error");
        $(`${el.target.className }-error`).addClass("hide");
    }
}

$(".first-name").on("input", (e) => validateInput(e));
$(".last-name").on("input", (e) => validateInput(e));

Есть много разных способов в зависимости от каркасов и разметки, которые у вас есть.Вы также можете изучить итерации по своим элементам и динамически подключить все события за один раз.

Answer 2

Чтобы сделать этот код более СУХИМ (т. Е. Не повторять себя), вы можете поместить общие классы в элементы, чтобы сгруппировать их по поведению.Затем вы можете привязать обработчики событий к этим классам и использовать обход DOM для связи элементов друг с другом.

Также обратите внимание, что вам нужен оператор else для отображения сообщений проверки и класса ошибок на оболочке.Этого можно добиться проще, используя toggleClass() и предоставив логическое значение, чтобы указать, при каких обстоятельствах класс должен быть добавлен / удален.Попробуйте это:

$('.field').on('input', function() {
  var $field = $(this);
  $field.closest('.field-wrapper').toggleClass('has-error', $field.val().trim() == "");
  $field.next('.validation-msg').toggleClass('hide', $field.val().trim() != "");
});

.has-error { color: #C00; }
.hide { display: none; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field-wrapper">
  <label for="first_name">First Name:</label>
  <input class="field" type="text" name="first_name" id="first_name">
  <div class="validation-msg hide">
    <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
  </div>
</div>
<div class="field-wrapper">
  <label for="last_name">Last Name:</label>
  <input class="field" type="text" name="last_name" id="last_name">
  <div class="validation-msg hide">
    <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
  </div>
</div>

Преимущество этого шаблона в том, что он бесконечно расширяемый, пока структура HTML вокруг полей остается согласованной.

Answer 3

Вы можете использовать множественный селектор jQuery и использовать селектор $ (this) для обработки активного элемента.

<div>
    <label for="first_name">First Name:</label>
    <input class="first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg">
        <p><i class="fas fa-exclamation`enter code here`-circle"></i> Please tell us your first name</p>
    </div>
</div>

<div>
    <label for="last_name">Last Name:</label>
    <input class="last-name" type="text" name="last_name" id="last_name">
    <div class="validation-msg">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your last name</p>
</div>


$('.first-name, .last-name').on('input', function(){
    var element = $(this); 
    if(element.val() != "") {
        element.parent().removeClass('has-error');
        element.next().addClass('hide');
    }
});

Также обратите внимание, что вы можете использоватьcss скрыть сообщение об ошибке , основанное на классе has-error родительского элемента.В этом случае вам больше не нужно будет переключать класс «hide» в сообщении проверки, то есть меньше кода js (https://codepen.io/AndrewRed/pen/yLBrLxv?editors=1111)

.validation-msg {
  display: none;
}

.has-error .validation-msg {
  display: block;
}

Answer 4

// This way you can target div or class anything;
// keep adding your object of element in **validationElements** array;
let validationElements = [{
        target: '.first-name',
        wrapperTarget: '.first-name-wrapper',
        errorTarget: '.first-name-error'
    },
    {
        target: '.last-name',
        wrapperTarget: '.last-name-wrapper',
        errorTarget: '.last-name-error'
    }
];


validationElements.forEach(function(element) {
    $(element.target).on('input', function() {
        if ($(element.target).val() != "") {
            $(element.wrapperTarget).removeClass('has-error');
            $(element.errorTarget).addClass('hide');
        }
    });
});