Question

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

这就是我对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，但我认为应该有一种动态的方法来检查它。任何指导/指示将不胜感激！

Answer 1

值得庆幸的是，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

Answer 2

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

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

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

2 个答案: