检查所有带有必需标签的输入是否为空

时间:2018-03-19 20:19:04

标签: jquery html

我已经定义了一些必需的字段,这些字段由必需的(*)标签指示,旁边有一个文本输入。当我提交时,我想确保在提交按钮后所有这些必需标签的文本输入都不为空。

这就是我对HTML(https://jsfiddle.net/mmsawjwr/5/)所拥有的:

<div class="col-md-12">

<label class="required" for="lblFirstName">First Name:</label>
<input id="txtFirstName" type="text"/>

<label class="required" for="lblLastName">Last Name:</label>
<input id="txtLastName" type="text"/>

</div>

<div class="col-md-12">

<label class="required" for="lblEmail">Email:</label>
<input id="txtEmail" type="text"/>

<label class="required" for="lblPhone">Phone number:</label>
<input id="txtPhone" type="text"/>

</div>

<button type="button" class="btnSaveAll" value="Save" style="margin-bottom:5px;">Save</button>

起初,我打算硬编码并单独检查每个ID,但我认为应该有一种动态的方法来检查它。任何指导/指示将不胜感激!

2 个答案:

答案 0 :(得分:0)

值得庆幸的是,HTML本身支持这一点:https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Form_validation

您可以指明required输入(例如。<input ... required />以使用内置表单验证:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-required

答案 1 :(得分:0)

您可能希望将所需的类移动到输入,或使用输入中所需的html5属性,然后使用此选择所需的所有输入 $('input[required="true"]')

我在这里提供了一个必需的类解决方案:https://jsfiddle.net/mmsawjwr/32/ 如果输入对else语句有效,则可能希望通过删除类来构建此解决方案。