CODEWITHSUNDEEP
javascriptif-statementvalidation
Stijn Hoste
Stijn Hoste

Reputation: 874

Form validation using JavaScript always true

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

Upvotes: 2

Views: 835

Answers (2)

Xotic750
Xotic750

Reputation: 23472

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

Upvotes: 0

flavian
flavian

Reputation: 28511

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

Upvotes: 2

Related Questions