javascript - 检查具有给定类的表单中的所有输入都不为空

Question

我有一个多步骤表单，所以有些按钮不是提交按钮，t嘿，只需带您进入下一步。

单击其中一个“假”按钮后，我想检查一组给定的输入是否为空。

到目前为止我已经这样做了(仅包含几个输入作为示例)但我不想对每个输入都这样做:

<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>