我已经定义了一些必需的字段,这些字段由必需的(*)标签指示,旁边有一个文本输入。当我提交时,我想确保在提交按钮后所有这些必需标签的文本输入都不为空。
这就是我对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,但我认为应该有一种动态的方法来检查它。任何指导/指示将不胜感激!
答案 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语句有效,则可能希望通过删除类来构建此解决方案。