Проверьте все входные данные в форме с данным классом не являются пустыми

Question

У меня есть многошаговая форма, поэтому некоторые кнопки не являются кнопками отправки, просто они переходят к следующему шагу.

При нажатии на одну из этих «фальшивых» кнопок я хочу убедиться, что данный набор входов не пуст.

Я сделал это до сих пор (только пара входов включены в качестве примера), но я не хочу делать это для каждого ввода:

<div class="field-wrapper first-name-wrapper">
    <label for="first_name">First Name:</label>
    <input class="text-validation first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg first-name-error hide">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your first name</p>
    </div>
</div>
<div class="field-wrapper last-name-wrapper">
    <label for="last_name">Last Name:</label>
    <input class="text-validation 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>

if ($('.first-name').val() == "") {
    $('.first-name-wrapper').addClass('has-error');
}
if ($('.last-name').val() == "") {
    $('.last-name-wrapper').addClass('has-error');
}

Как я могупроверить, что каждый из входных данных не является нулевым, не повторяя себя, а затем назначить класс has-error для отдельного элемента?

Answer 1

Вы можете использовать класс .text-validation, чтобы получить доступ ко всем входным данным и применить событие изменения,

, поэтому, если value = "" просто добавить, есть ошибка в родительской оболочке div, как показано ниже:

$(function() {
  $(".text-validation").on("change",function(e){
    $(this).val().length == 0 ?  $(this).parent().addClass("has-error") : $(this).parent().removeClass("has-error");
    console.log( $(this).parent());
  });
  
  $("#btn").on("click",function(a) {
    $(".text-validation").change();
  })
  
});

.hide {
  display:none;
  color:red;
}

.field-wrapper.has-error .hide {
  display:block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="field-wrapper first-name-wrapper">
    <label for="first_name">First Name:</label>
    <input class="text-validation first-name" type="text" name="first_name" id="first_name">
    <div class="validation-msg first-name-error hide">
        <p><i class="fas fa-exclamation-circle"></i> Please tell us your first name</p>
    </div>
</div>
<div class="field-wrapper last-name-wrapper">
    <label for="last_name">Last Name:</label>
    <input class="text-validation 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>
<br >
<button id="btn">submit</button>