форма проверки с использованием JavaScript всегда верно

Question

Добавлен дополнительный текст, потому что StackOverflow говорит, что слишком много кода

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> 

JAVASCRIPT

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!"; 
    } 
} 

Почему это всегда возвращает истину?

Заранее благодарен!

Стейн

Answer 1

Если вы читали here, вы увидите, что document.getElementsByName возвращает NodeList, ни один Node.

Click for live working demo

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"; 
}; 

Answer 2

Принимая во внимание вопрос обновления и другая информация указала на о том, как стиль ваш код лучше. Вот возможное решение.

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

Difference between id and name attributes in HTML

Why is using onClick() in HTML a bad practice?

Unobtrusive JavaScript