javascript - JavaScript を使用したフォーム検証は常に true

Question

コードが多すぎるとスタックオーバーフローが言っているため、テキストを追加しました

HTML

<form name="contact">
    <fieldset>
        <label class="labelone" for="naam">Naam:</label>
        <input name="naam">
        <label for="email">Email:</label>
        <input name="email">
        <label for="boodschap">Boodschap:</label>
        <textarea name="boodschap"></textarea>
    </fieldset>
    <fieldset>
        <input class="btn" type="button" onClick="valideren()" value="Verzenden" />
        <div id="resultaat"></div>
    </fieldset>
</form>

ジャバスクリプト

function valideren() {
    if (document.getElementsByName('naam').value != '' && document.getElementsByName('email').value != '' && document.getElementsByName('boodschap').value != '') {
        document.getElementById('resultaat').innerHTML = "De e-mail werd verstuurd";
    } else {
        document.getElementById('resultaat').innerHTML = "Gelieve alle velden in te vullen!";
    }
}

これが常に true を返すのはなぜですか?

前もって感謝します！

ステイン

score 2 · Accepted Answer

ここを読むと、が単一document.getElementsByNameのではなくを返すことがわかります。NodeListNode

ライブ作業デモをクリック

var naam = document.getElementsByName('naam')[0].value,
    email = document.getElementsByName('email')[0].value,
    boodschap = document.getElementsByName('boodschap')[0].value,
    target = document.getElementById('resultaat');

今：

if (naam.length && email.length && boodschap.length) {
    target.innerHTML += "valid";
} else {
    target.innerHTML += "invalid";
};

score 0 · Accepted Answer

質問の更新と、コードのスタイルを改善する方法について指摘されたその他の情報を考慮してください。これが可能な解決策です。

HTML

<form name="contact">
    <fieldset>
        <label class="labelone" for="naam">Naam:</label>
        <input name="naam">
        <label for="email">Email:</label>
        <input name="email">
        <label for="boodschap">Boodschap:</label>
        <textarea name="boodschap"></textarea>
    </fieldset>
    <fieldset>
        <input id="validateButton" class="btn" type="button" value="Verzenden" />
        <div id="resultaat"></div>
    </fieldset>
</form>

Javascript

function valideren() {
    var form = this.parentNode.parentNode,
        resultaat = document.getElementById('resultaat');

    if (form.naam.value !== '' && form.email.value !== '' && form.boodschap.value !== '') {
        resultaat.textContent = "De e-mail werd verstuurd";
    } else {
        resultaat.textContent = "Gelieve alle velden in te vullen!";
    }
}

document.getElementById('validateButton').addEventListener("click", valideren, false);

jsfiddleについて

ボタンに「id」を追加して、jsfiddle で簡単に見つけられるようにしました。もちろん、別の方法を使用して DOM で見つけることもできます。

一部参考資料。

document.getElementById

document.getElementsByName

HTML の id 属性と name 属性の違い

HTMLでonClick()を使用するのが悪い習慣なのはなぜですか?

控えめな JavaScript