檢查所有帶有必需標簽的輸入是否為空

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/zh-CN/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"]')選擇所有需要$('input[required="true"]')

我在這里提供了必需的類解決方案： https : //jsfiddle.net/mmsawjwr/32/如果輸入對else語句也有效，那么您可能希望通過刪除類來構建此解決方案。