Javascript jQuery显示空输入字段的div（验证）

我希望仅当

编辑图标
为
：选中时，
为空和
必需的字段显示
.indicator

我试图将其用作验证，以便用户知道缺少哪些输入


$（“#编辑切换”）.prop（“选中”，为真）；
$（“.edit:input”）.attr（“disabled”，true）；
函数editStatus（）{
$（“#编辑切换”）。打开（“更改”，函数（）{
$（此）.toggleClass（“新”）；
切换状态（）；
});
}
函数toggleStatus（）{
如果（$（“#编辑切换”）为（“：选中”））{
$（“.indicator”）.removeClass（'animate'）；
$（“.edit:input”）.attr（“disabled”，true）；
}否则{
$（“.indicator”）.addClass（'animate'）；
$（“.edit:input”）.removeAttr（“已禁用”）；
}
}
。编辑图标i{
颜色：白色；
填充：10px；
边界半径：50%；
}
.编辑图标输入[type=“checkbox”]，
.编辑图标。已选中{
显示：无；
背景：蓝色；
}
.编辑图标输入[type=“checkbox”]，
.编辑图标。未选中{
背景：绿色；
-webkit动画：向前反弹0.5s；
动画：向前反弹0.5秒；
}
.编辑图标输入[type=“checkbox”]：选中~.选中{
显示：内联块；
-webkit动画：向前反弹0.5s；
动画：向前反弹0.5秒；
}
.编辑图标输入[type=“checkbox”]：选中~未选中{
显示：无；
}
.街区{
显示器：flex；
对齐项目：居中；
}
.指标{
变换：比例（0）；
转换：转换250ms；
高度：10px；
宽度：10px；
边界半径：50%；
背景色：红色；
}
.指示器{
变换：比例（1）；
}
@-webkit关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
40% {
-webkit转换：规模（1.3）；
转换：比例（1.3）；
}
60% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
}
@关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
40% {
-webkit转换：规模（1.3）；
转换：比例（1.3）；
}
60% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
}
如果您只希望在用户单击编辑时进行验证，您可以这样做，但我在底部还有另一个建议：


$（“#编辑切换”）.prop（“选中”，为真）；
$（“.edit:input”）.attr（“disabled”，true）；
函数editStatus（）{
$（“#编辑切换”）。打开（“更改”，函数（）{
$（此）.toggleClass（“新”）；
切换状态（）；
});
}
函数toggleStatus（）{
如果（$（“#编辑切换”）为（“：选中”））{
$（“.indicator”）.removeClass（'animate'）；
$（“.edit:input”）.attr（“disabled”，true）；
}否则{
$（'.edit:input'）。每个（函数（）{
if（$（this.val（）=''&$（this.prop（'required'））{
$（this.parent（）.find（'.indicator'）.addClass（'animate'）；
}
});
$（“.edit:input”）.removeAttr（“已禁用”）；
}
}
。编辑图标i{
颜色：白色；
填充：10px；
边界半径：50%；
}
.编辑图标输入[type=“checkbox”]，
.编辑图标。已选中{
显示：无；
背景：蓝色；
}
.编辑图标输入[type=“checkbox”]，
.编辑图标。未选中{
背景：绿色；
-webkit动画：向前反弹0.5s；
动画：向前反弹0.5秒；
}
.编辑图标输入[type=“checkbox”]：选中~.选中{
显示：内联块；
-webkit动画：向前反弹0.5s；
动画：向前反弹0.5秒；
}
.编辑图标输入[type=“checkbox”]：选中~未选中{
显示：无；
}
.街区{
显示器：flex；
对齐项目：居中；
}
.指标{
变换：比例（0）；
转换：转换250ms；
高度：10px；
宽度：10px；
边界半径：50%；
背景色：红色；
}
.指示器{
变换：比例（1）；
}
@-webkit关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
40% {
-webkit转换：规模（1.3）；
转换：比例（1.3）；
}
60% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
}
@关键帧反弹{
0%,
20%,
50%,
80%,
100% {
-webkit转换：规模（1）；
变换：比例（1）；
}
40% {
-webkit转换：规模（1.3）；
转换：比例（1.3）；
}
60% {
-webkit转换：比例（1.1）；
转换：比例（1.1）；
}
}