Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum. Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden. Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!

We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.

Team Webprofis

Form validation javascript

bewerkt di 9 feb 2016 in Tutorials & Scripten Posts: 879
Auteur: nuet

Demo

Download


Onderstaand een validatie van een form dat met javascript gebeurt. Verplichte velden die niet zijn ingevuld worden met rood weergegeven.

Het javascript:

window.onload = init;

// The "onload" handler. Run after the page is fully loaded.
function init() {
// Attach "onsubmit" handler
document.getElementById("form").onsubmit = validateForm; // valideer bij submitten
// Attach "onclick" handler to "reset" button
document.getElementById("reset").onclick = clearDisplay; // reset alle input
// Set initial focus
document.getElementById("name").focus();
}

// NB: in onderstaande volgorde vind ook de validatie plaats
function validateForm() {
return (isNotEmpty("voornaam", "Uw Voornaam is verplicht!")
&& isNotEmpty("achternaam", "Uw Achternaam is verplicht!")
&& isChecked("geslacht", "Vink een geslacht aan!")
&& isNotEmpty("adres", "Uw Adres is verplicht!")
&& isNotEmpty("postcode", "Uw Postcode is verplicht!")
&& isNotEmpty("woonplaats", "Uw woonplaats is verplicht!")
&& isSelected("land", "Maak een selectie!")
&& isNotEmpty("telefoon", "Telefoonnummer is verplicht!")
&& isValidEmail("email", "Voer een geldig emailadres in!")
&& isChecked("contactme", "Vink minimaal 1 optie aan!")
);
}

// Return true als inputveld niet leeg is
function isNotEmpty(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value.trim();
var isValid = (inputValue.length !== 0); // boolean
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

/* If "isValid" is false, print the errorMsg; else, reset to normal display.
* The errorMsg shall be displayed on errorElement if it exists;
* otherwise via an alert().
*/
function showMessage(isValid, inputElement, errorMsg, errorElement) {
if (!isValid) {
// Put up error message on errorElement or via alert()
if (errorElement !== null) {
errorElement.innerHTML = errorMsg;
} else {
alert(errorMsg);
}
// Change "class" of inputElement, so that CSS displays differently
if (inputElement !== null) {
inputElement.className = "error";
inputElement.focus();
}
} else {
// Reset to normal display
if (errorElement !== null) {
errorElement.innerHTML = "";
}
if (inputElement !== null) {
inputElement.className = "";



}
}
}

// Return true if the input value is a valid email address

function isValidEmail(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value;
var atPos = inputValue.indexOf("@");
var dotPos = inputValue.lastIndexOf(".");
var isValid = (atPos > 0) && (dotPos > atPos + 1) && (inputValue.length > dotPos + 2);
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

// Return true if selection is made (not default of "") in <select> input
function isSelected(inputId, errorMsg) {
var inputElement = document.getElementById(inputId);
var errorElement = document.getElementById(inputId + "Error");
var inputValue = inputElement.value;
// You need to set the default value of <select>'s <option> to "".
var isValid = inputValue !== "";
showMessage(isValid, inputElement, errorMsg, errorElement);
return isValid;
}

// Return true if the one of the checkboxes or radio buttons is checked
function isChecked(inputName, errorMsg) {
var inputElements = document.getElementsByName(inputName);
var errorElement = document.getElementById(inputName + "Error");
var isChecked = false;
for (var i = 0; i < inputElements.length; i++) {
if (inputElements[i].checked) {
isChecked = true; // found one element checked
break;
}
}
showMessage(isChecked, null, errorMsg, errorElement);
return isChecked;
}


// The "onclick" handler for the "reset" button to clear the display
function clearDisplay() {
var elms = document.getElementsByTagName("*"); // all tags
for (var i = 0; i < elms.length; i++) {
if ((elms[i].id).match(/Error$/)) { // no endsWith() in JS?
elms[i].innerHTML = "";
}
if (elms[i].className === "error") { // assume only one class
elms[i].className = "";
}
}
// Set initial focus
document.getElementById("name").focus();
}

De Form:

<form action="" id="form" name="form" method="post">

Contact persoon<br /><br />


<input class="" id="voornaam" name="voornaam" placeholder="Voornaam *" />
<p id="voornaamError" class="red"></p>


<input class="" id="tussenvoegsel" name="tussenvoegsel" placeholder="Tussenvoegsel" />
<br /><br />

<input class="" id="achternaam" name="achternaam" placeholder="Achternaam *" />
<p id="achternaamError" class="red"></p>

Geslacht *<br/><br />
<input type="radio" name="geslacht" value="m" />Man
<input type="radio" name="geslacht" value="v" />Vrouw
<p id="geslachtError" class="red">&nbsp;</p>

Uw adres<br /><br />

<input class="" id="adres" name="adres" placeholder="Adres *" />
<p id="adresError" class="red"></p>


<input class="" id="postcode" name="postcode" placeholder="Postcode *" />
<p id="postcodeError" class="red"></p>


<input class="" id="woonplaats" name="woonplaats" placeholder="Woonplaats *" />
<p id="woonplaatsError" class="red"></p>

Land *
<select id="land" name="land">
<option value="" selected>Selecteer...</option>
<option value="nederland">Nederland</option>
<option value="belgie">Belgie</option>
<option value="anders">Anders</option>
</select>
<p id="landError" class="red">&nbsp;</p>

Contact gegevens<br /><br />

<input class="" id="telefoon" name="telefoon" placeholder="Telefoonnummer *" />
<p id="telefoonError" class="red"></p>


<input class="" id="telefoon2" name="telefoon2" placeholder="Alternatief nummer" />
<br /><br />

<input class="" id="email" name="email" placeholder="E-mail adres *" />
<p id="emailError" class="red"></p>


Contacteer me via *<br /><br />
<input type="checkbox" name="contactme" value="email" />Email
<input type="checkbox" name="contactme" value="telefoon" />Telefoon
<input type="checkbox" name="contactme" value="post" />Post
<p id="contactmeError" class="red">&nbsp;</p>



<input type="reset" value="Reset" id="reset" />
<input class="submit" id="submit" value="Versturen" type="submit" />

</form>

Css voor styling errors:

.red { /* error messages */
color: #fb4b4b;
}

.error { /* error input op tekstvelden */
background-color: #fbc0c0;
}

Benodigde API: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Getagd:
Dit Topic is gesloten.