Melding leeg veld

[aj2012]

We willen graag een melding krijgen, wanneer een of meerdere velden niet zijn ingevuld in het volgende form:

<form action="index.php" method="post">
  
Naam: <input type="text" name="naam" /> </p>
E-mailadres: <input type="text" name="email" /></p>
Geslacht:
<input type="radio" name="geslacht" value="Man" /> Man
<input type="radio" name="geslacht" value="Vrouw" /> Vrouw
</p>

<input type="submit" value="volgende" />

</form>

 

[Robin S]

Je maakt een functie die aangeroepen wordt bij de submit-event van de form. Dan ga je verschillende checks definiëren, ieder met een foutmelding. Als er tenminste één foutmelding is, wordt de submit gestopt en de meldingen weergegeven.

[JS]function addEvent(el, type, callback, useCapture) {
if (el.addEventListener) {
el.addEventListener(type, callback, useCapture);
}
else if (el.attachEvent) {
el.attachEvent("on" + type, callback);
}
else {
el["on" + type] = callback;
}
}

function getRadioValue(radioGroup) {
var i = 0;
while (i < radioGroup.length && !radioGroup.checked) {
i++;
}
return i < radioGroup.length ? radioGroup.value : undefined;
}

function main() {

addEvent(document.forms[0], "submit", function(e) {
//Check form fields in this function
//Keyword this refers to the form
var checks = [
{
check: this.naam.value != "",
errorMessage: "Vul alsjeblieft je naam in"
},
{
check: this.email.value != "",
errorMessage: "Vul alsjeblieft je email-adres in"
},
{
check: getRadioValue(this.geslacht) !== undefined,
errorMessage: "Vul alsjeblieft je geslacht in"
}
], errors = [];

for (var i = 0; i < checks.length; i++) {
if (!checks.check) {
errors.push(checks.errorMessage);
}
}

if (errors.length) {
e.preventDefault();
alert(errors.join("\n"));
}
}, false);
}
window.onload = main;[/JS]