Jquery 如果字段不完整，如何避免转到下一个字段？

以一种简单的方式，如何避免在字段为空时进入下一步，所有字段都会显示相同的消息，而不管字段类型是

input、textarea、select、radio、checkbox

等等，在字段下方显示以下消息“此字段必须完成才能继续”

填充完所有字段后，继续下一个字段，依此类推

---

这是完整的代码：

要针对不同的输入类型，最好的方法是使用一个唯一的共享类名，比如这里的

图标邮件。。并设置required属性，这样我们就可以依靠浏览器验证，并在需要时用作jQuery选择器过滤器

正如问题所问，这是一个最低限度的更改，以防止在该级别的输入为空时跳过表单步骤

您可以使用的另一种方法是即时验证，方法是使用
.on（'change keyup…'）
触发一个函数来验证当前级别字段、更改样式计数并切换按钮可见性


$（函数（）{
$（“正文”）。关于（“键控”、“形式”、函数（e）{
如果（e.which==13）{
如果（$（“#下一个向导”）.is（“：visible”）&&&$（“fieldset.current向导”）.find（“input，textarea”）.valid（）{
e、 预防默认值（）；
nextSection（）；
返回false；
}
}
});
$（“#下一个向导”）。在（“单击”上，函数（e）{
var notEmpty=$（'fieldset.current-wizard.icon mail[必需]）.filter（函数（）{
返回$（this.val（）；
}).长度；
var reqElms=$（'fieldset.current-wizard.icon mail[required]'）。长度；
//console.log（如target）；
如果（notEmpty==reqElms）{
$（'.sms'）.empty（）；
$（'.errtxt'）.remove（）；
$（'fieldset.current-wizard.icon mail[必需]）.filter（函数（）{
返回$（this.val（）；
}).addClass（“成功”）；
nextSection（）；
}否则{
e、 预防默认值（）；
$（'fieldset.current-wizard.icon mail[必需]）.filter（函数（）{
if（$（this）.val（）.length==0）{
$（this）.removeClass（'success'）.addClass（“error”）；
$（this.parent（）.append（'必须填写此字段才能继续！'）；
}
});
}
});
$（“表格”）。关于（“提交”，职能部门（e）{
如果（$（“#下一个向导”）.is（“：visible”）| |$（“fieldset.current wizard”）.index（）<3）{
e、 预防默认值（）；
}
});
函数goToSection（i）{
$（“字段集：gt（“+i+”））.removeClass（“当前向导”）.addClass（“下一个向导”）；
$（“字段集：lt（“+i+”））.removeClass（“当前向导”）；
$（“li”）.eq（i）.addClass（“当前向导”）.sides（）.removeClass（“当前向导”）；
setTimeout（函数（）{
$（“字段集”）.eq（i）.removeClass（“下一个向导”）.addClass（“当前向导活动向导”）；
if（$（（“fieldset.current向导”）.index（）=3）{
$（“#下一个向导”）.hide（）；
$（“.indicate”）.show（）；
}否则{
$（“#下一个向导”）.show（）；
$（“.indicate”）.hide（）；
}
}, 80);
}
函数nextSection（）{
变量i=$（“fieldset.current向导”）.index（）；
如果（i<3）{
$（“li”）.eq（i+1）.addClass（“活动向导”）；
goToSection（i+1）；
}
}
$（“li”）。在（“单击”）上，函数（e）{
var i=$（this.index（）；
if（$（this）.hasClass（“活动向导”））{
goToSection（i）；
}否则{
警告（“请先完成前面的部分。”）；
}
});
});
。错误{
边框：2件纯红！重要；
}
.成功{
边框：2件纯绿！重要；
}
.向导表单{
宽度：600px；
高度：自动；
填充：20px；
背景：#fff；
利润率：80px自动；
位置：相对位置；
最小高度：300px；
}
ul#部分选项卡{
字号：0.8em；
高度：50px；
位置：相对位置；
利润上限：-50px；
边缘底部：50px；
填充：0；
字体大小：粗体；
列表样式：无；
文本转换：大写；
}
#第页签李{
颜色：#A7A7；
光标：不允许；
左边框：1px实心#aaa；
文字装饰：无；
填充：0 6px；
浮动：左；
宽度：25%；
框大小：边框框；
文本对齐：居中；
字体大小：粗体；
线高：30px；
背景：ddd；
位置：相对位置；
}
#第二节：李跨度{
颜色：#巴巴巴；
}
#节选项卡li.active-wizard{
颜色：#444；
光标：指针；
}
#李：之后{
内容：“；
显示：块；
左边距：0；
位置：绝对位置；
左：0；
排名：0；
}
#节选项卡li.current-wizard{
不透明度：1；
背景：#fff；
z指数：999；
左边界：无；
}
#节选项卡li.当前向导：之后{
边框：15px实心透明；
左边框：15px固体#2cbab2；
}
.错误{
颜色：#bf2424；
显示：块；
}
input.error，
textarea.error{
边框颜色：#bf2424；
}
输入。错误：焦点，
text区域。错误：焦点{
边框颜色：#bf2424；
}
标签错误{
边缘底部：20px；
}
input.valid{
颜色：绿色；
}
label.valid{
位置：绝对位置；
右：20px；
}
输入+。有效，
text区域+。有效{
显示：无；
}
.valid+.valid{
显示：内联；
位置：绝对位置；
右：10px；
利润上限：-36px；
颜色：绿色；
}
.btn向导{
边界：无；
填充：8px；
背景：#2cbab2；
光标：指针；
过渡：均为0.3秒；
-webkit转换：所有0.3；
-moz转换：全部为0.3s；
颜色：#fff；
位置：绝对位置；
底部：20px；
右：20px；
字体系列：“Merriweather Sans”，无衬线；
}
.btn向导：悬停{
背景：#26a19a；
}
div#字段集{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：100%；
身高：100%；
填充：20px；
框大小：边框框；
溢出：隐藏；
}
字段集{
边界：无；
位置：绝对位置；
左：-640px；
宽度：600px；
填充：10px0；
过渡：所有0.3s线性；
-webkit转换：所有0.3s线性；
-moz过渡：所有0.3s线性；
-ms转换：所有0.3s线性；
不透明度：0；
}
fieldset.current-wizard{
左：20px；
不透明度：1；
}
fieldset.next-wizard{
左：640px；
}
.表示{
显示：无；
边界：无；
}
#下一个向导{
/*显示：无*/
}
.场{
位置：相对位置；
disp