Javascript 检查给定类的表单中的所有输入是否为空

我有一个多步骤表单，所以一些按钮不是提交按钮，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');
}

名字：
请告诉我们你的名字

姓氏：
请告诉我们你的姓

如果（$（'.first name'）.val（）==“”）{
$（'.first name wrapper'）.addClass（'has-error'）；
}
如果（$（'.last name'）.val（）==“”）{
$（'.last name wrapper'）.addClass（'has-error'）；
}

---

如何在不重复我自己的情况下检查每个输入是否为非空，然后将has error类分配给单个项目？

您可以使用类

。文本验证

访问所有输入并应用更改事件

所以，如果

value=”“

只需将错误添加到父包装器div，如下代码段所示：

$（函数（）{
$（“.text validation”）。关于（“更改”，函数（e）{
$（this.val（）.length==0？$（this.parent（）.addClass（“有错误”）：$（this.parent（）.removeClass（“有错误”）；
log（$（this.parent（））；
});
$（“#btn”）。在（“单击”，功能（a）{
$（“.text验证”）.change（）；
})
});
.hide{
显示：无；
颜色：红色；
}
.field-wrapper.has-error.hide{
显示：块！重要；
}

名字：
请告诉我们你的名字

姓氏：
请告诉我们你的姓



submit
这一切都在
中吗？如果您使用我在您的HTML中显示的HTML，您需要做的就是在
$（'.field'）上循环。每个（）
然后检查该循环中的
val（）
。或者，只需将
required
属性添加到HTML中，并使用CSS中的选择器添加样式。我不能使用required属性作为多步骤表单，因此提交要等到几个步骤之后。不过我可以使用每个函数。