Form validation using JavaScript always true

Question

Added some more text because stackoverflow says there's too much code

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

Why does this always return true?

Thanks in advance!

Stijn

`document.getElementsByName` returns a NodeList not a Node. You have to loop. — elclanrs, May 16 '13 at 23:12
It helps to format the code in your question so that it is readable. — Xotic750, May 16 '13 at 23:13
Provide supporting code when asking a question, a jsfiddle of your issue always helps too. This means we do not need to guess or create a jsfiddle for you. — Xotic750, May 16 '13 at 23:15
Background read: http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice and http://en.wikipedia.org/wiki/Unobtrusive_JavaScript and http://stackoverflow.com/questions/3142710/inline-styles-vs-classes — Xotic750, May 16 '13 at 23:21
Ok, i'll bare that in mind the next time I ask a question. Thanks for your help! — Stijn Hoste, May 16 '13 at 23:22

flavian · Accepted Answer · 2013-05-16T23:20:47.920

2

If you read here, you will see that document.getElementsByName returns a NodeList, not a single 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');

Now:

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

edited May 16 '13 at 23:20

answered May 16 '13 at 23:15

flavian

28,161
11
65
105

Thanks for your nice response! Even though it keeps returning invalid, when all fields are filled in... – Stijn Hoste May 16 '13 at 23:23

score 0 · Answer 2 · edited May 23 '17 at 12:29

Taking into consideration the question updates and other information pointed to about how to style your code better. Here is a possible solution.

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);

On jsfiddle

I added an "id" to the button just to make it easier to locate in the jsfiddle, of course you can use alternative methods to find it in the DOM.

Some reference material.

document.getElementById

document.getElementsByName

Difference between id and name attributes in HTML

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

Unobtrusive JavaScript