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
– elclanrs, Commented May 16, 2013 at 23:12
It helps to format the code in your question so that it is readable. — Xotic750
– Xotic750, Commented May 16, 2013 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
– Xotic750, Commented May 16, 2013 at 23:15
Background read: stackoverflow.com/questions/5871640/… and en.wikipedia.org/wiki/Unobtrusive_JavaScript and stackoverflow.com/questions/3142710/inline-styles-vs-classes — Xotic750
– Xotic750, Commented May 16, 2013 at 23:21
Ok, i'll bare that in mind the next time I ask a question. Thanks for your help! — Stijn Hoste
– Stijn Hoste, Commented May 16, 2013 at 23:22

flavian · Accepted Answer · 2013-05-16 23:20:47Z

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, 2013 at 23:20

answered May 16, 2013 at 23:15

flavian

28.6k11 gold badges68 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stijn Hoste Over a year ago

Thanks for your nice response! Even though it keeps returning invalid, when all fields are filled in...

Community · Accepted Answer · 2017-05-23 12:29:22Z

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

Collectives™ on Stack Overflow

Form validation using JavaScript always true

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related