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
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";
};
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
链接地址: http://www.djcxy.com/p/88058.html上一篇: 是否使用HTML5中的名称属性弃用？