JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<div id="form">
<h3>Aanmelding WIES Congres</h3>
<form name="myForm" action="showform.php" onsubmit="return validateForm();" method="post">
<INPUT TYPE="hidden" NAME="to" VALUE="a" />
<p class="legend">Deelnemer</p>
<fieldset id="deelnemer">
<label>Naam</label>
<input type="text" name="Naam" size="30" />
<label>Bedrijf</label>
<input type="text" name="Bedrijf" size="30" />
</br>
<label>Adres</label>
<input type="text" name="Adres" size="30" />
<br/>
<label>Postcode</label>
<input type="text" name="Postcode" id="postcode" onblur="myPostcode();" size="30" />
<label>Plaats</label>
<input type="text" name="Plaats" size="30" />
</br>
<label>Land</label>
<select name="land">
<option value="Nederland" selected="selected">Nederland</option>
<option value="Belgie">Belgie</option>
<option value="Duitsland">Duitsland</option>
<option value="Frankrijk">Frankrijk</option>
<option value="Luxemburg">Luxemburg</option>
</select>
<br/>
<br/>
<label>WIES ID</label>
<input type="radio" name="Ja" value="Ja" id="Ja" />Ja
<input type="radio" name="Ja" value="Nee" id="Nee" />Nee
<br/>
<label class="lidnummer">Lidnummer</label>
<input type="text" name="getal1" maxlength="6" size="25" />
<br/>
<label class="lidnummer">WIES pin</label>
<input type="password" maxlength="4" name="getal2" size="25" />
<br/>
<div>
<span id="NaamVerplicht" class="Error">* Naam is...
JavaScript
function validateForm() {
var errorFound = false;
if (isEmpty("Naam")) {
errorFound = true;
}
if (isEmpty("Adres")) {
errorFound = true;
}
if (isEmpty("Postcode")) {
errorFound = true;
}
if (isEmpty("Plaats")) {
errorFound = true;
}
if (!document.getElementById("radio1").checked && !document.getElementById("radio2").checked&& !document.getElementById("radio3").checked) {
errorFound = true;
}
if (!document.getElementById("radio4").checked && !document.getElementById("radio5").checked&& !document.getElementById("radio6").checked) {
errorFound = true;
}
return (!errorFound)
}
function isEmpty(fieldName) {
var x = document.forms["myForm"][fieldName].value;
if (x == null || x == "") {
document.forms["myForm"][fieldName].className = "required";
document.getElementById(fieldName + "Verplicht").style.display = "inline";
return true;
} else {
document.forms["myForm"][fieldName].className = "";
document.getElementById(fieldName + "Verplicht").style.display = "none";
return false;
};
}
function myPostcode() {
var x = document.getElementById("postcode").value;
document.getElementById("postcode").value = x.toUpperCase();
}