來自兩個輸入字段的值/警報

Question

我得到了一個帶有一些必須驗證的輸入字段的簡易公式。

問題是：如何檢查兩個輸入字段是否為空？ 而不是發出警報？

<input type="text" class="field1" name="vorname"  id="vorName"/>
<input type="text" class="field1" maxlength="30" name="vorname" id="nachName"/>

警報應該看起來像這樣：輸入字段：Vorname和Nachname不正確/為空！

Answer 1

除了顯示alert您可以使用HTML5的required屬性進行驗證。

<input type="text" class="field1" name="vorname" id="vorName" required />
<!--                                                          ^^^^^^^^ -->
<input type="text" class="field1" maxlength="30" name="nachname" id="nachName" required />
<!--                                                                           ^^^^^^^^ -->

需要：

此屬性指定用戶在提交表單之前必須填寫一個值。 當type屬性為隱藏，圖像或按鈕類型（提交，重置或按鈕）時，不能使用它。 ：optional和：required CSS偽類將適當地應用於該字段。

如果某些瀏覽器不支持此功能，則可以使用polyfill。

解決了問題：

function proof() {
    var elements = document.getElementsByClassName("field1");

    var fehler = [];
    var meldung = "Bitte noch folgende(s) Eingabefeld(er) füllen: \n";

    for (var i = 0; i < elements.length; i++) {
        if (i != 3) {
            if (!elements[i].value) {
                fehler.push(elements[i].name);
            }
        }
    }

    for (var i = 0; i < fehler.length; i++) {
        meldung += " - " + fehler[i] + "\n";
    }

    if (fehler.length > 0) {
        alert(meldung);
        return false;
    }
}