Archief - Hulp bij form validatie

nck2040 · 7 jan 2011

Ik heb vandaag een form validatie gemaakt , maar het is nog niet helemaal wat het moet zijn. Als een vak niet ingevuld is dienen de tekstvakken rood te worden en dan doen ze ook, maar slechts 1 sec als je op de 'submit' knop drukt. Het rood zou dus moeten blijven staan...

Voor een demo:
New Web Project

Code:

/**
 * @author Nicholas.Lievens KdG
 */
// Als de lengte van het string element 0 is toon hulpbericht
window.addEventListener("load", function(){
	var form = document.getElementById('form');
	form.addEventListener("submit", function(){
	notEmpty(document.getElementById('req1'), 'Please enter a value');
	isNumeric(document.getElementById('numbers'), 'Please enter numbers');
	isAlphabet(document.getElementById('letters'), 'Please enter letters');
	lengthRestriction(document.getElementById('maxlengte'), '2', '8');
	madeSelection(document.getElementById('selection'), 'Please make a selection');
	emailValidator(document.getElementById('emailer'), 'No valid email');
	}, false);
	}, false);

function notEmpty(elem, helperMsg) {
	if(elem.value.length == 0){
		elem.style.backgroundColor = 'red';
		elem.focus(); // zet focus op deze input
		return false;
	}
	return true
}

// Als het string element overeen komt met de reguliere expressie zijn het nummers
function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}
	else {
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}

// Als het string element overeenkomt met de reguliere expressie zijn het letters
function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}
	else {
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}


function lengthRestriction(elem, min, max){
	var uInput = elem.value.length;
	if(uInput >= min && uInput <= max){
		return true;
	}else{
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}


function madeSelection(elem, helperMsg){
	if(elem.value == "Please Choose"){
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
	else {
		return true;
	}
}

function emailValidator(elem, helperMsg){
	var emailExp =  /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if (elem.value.match(emailExp)) {
		return true;
	}
	else{
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}

Ik heb ook al geprobeerd de code wat om te vormen naar bv simpelweg

Code:

function controle() {
	notEmpty();
	}

function notEmpty() {
	var leeg = document.getElementById('req1');
	if(leeg.value.length == 0){
		leeg.style.backgroundColor = 'red';
		return false;
	}
	return true;
}

en dan in HTML

Code:

<form action="" id ="form" onsubmit="return controle()" method="post">

Het geeft dus allebei hetzelfde resultaat..

*btw let niet op de helperMsg, het script is afgeleid uit een tutorial en dat was met popups, wat in mijn geval niet mag

demon326 · 7 jan 2011

In plaats van het zelf te schrijven, kan je misschien gebruik maken van de reeds bestaande form vaildate scripts, bijvoorbeeld dit(jQuery validation plug-in - main demo) script op Jquery basis

nck2040 · 7 jan 2011

Het moet tot een project van school gaan horen en dus moet ik het ergens wel zelf schrijven. Allé ik kan het kopiëren van ergens maar ik moet het wel volledig zelf verstaan en aangezien we in de lessen geeen gebruik hebben gemaakt van jQuery enzo...

scipicore · 8 jan 2011

Als je javascript kent, is jQuery een eitje. Verdiep jezelf er wat in en je zal merken dat je veel meer met veel minder zal kunnen doen.

Als je leerkrachten er over klagen dat je gebruik maakt van een library dan zeg je maar dat dat in de bedrijfswereld ook meer en meer gebruikt wordt.

nck2040 · 8 jan 2011

Ik apprecieer de goede tips enzo, maar ik denk dat mijn tijd nogal beperkt is om nog jQuery te gaan bekijken en te begrijpen... Iemand die redelijk wat kent van javascript moet mijn probleem toch gwn kunnen oplossen? Ik denk dat niet zo moeilijk is als je het weet...

Zero Grav · 8 jan 2011

De fout zit em erin dat ge uw submit event niet annuleert als er validatiefouten optreden waardoor de pagina gewoon opnieuw laadt.
Bij het klikken op de submitbutton moet ge in uw functie dus het event opvangen en dat tegenhouden zodat uw browser er niet op reageert.

Dat kunt ge door 'return false' te doen op het einde van die functie, maar de beste manier is om het event als parameter in uw functie op te vangen en dan event.preventDefault(); en event.stopPropagation(); te doen.

Code:

/**
 * @author Nicholas.Lievens KdG
 */
 
// Als de lengte van het string element 0 is toon hulpbericht
window.addEventListener("load", function() {
	var form = document.getElementById('form');
	
	form.addEventListener("submit", function(e){
		e.preventDefault();
		e.stopPropagation();
	
		notEmpty(document.getElementById('req1'), 'Please enter a value');
		isNumeric(document.getElementById('numbers'), 'Please enter numbers');
		isAlphabet(document.getElementById('letters'), 'Please enter letters');
		lengthRestriction(document.getElementById('maxlengte'), '2', '8');
		madeSelection(document.getElementById('selection'), 'Please make a selection');
		emailValidator(document.getElementById('emailer'), 'No valid email');
		
	}, false);
}, false);

function notEmpty(elem, helperMsg) {
	if(elem.value.length == 0){
		elem.style.backgroundColor = 'red';
		elem.focus(); // zet focus op deze input
		return false;
	}
	return true
}

// Als het string element overeen komt met de reguliere expressie zijn het nummers
function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}
	else {
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}

// Als het string element overeenkomt met de reguliere expressie zijn het letters
function isAlphabet(elem, helperMsg){
	var alphaExp = /^[a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}
	else {
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}


function lengthRestriction(elem, min, max){
	var uInput = elem.value.length;
	if(uInput >= min && uInput <= max){
		return true;
	}else{
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}


function madeSelection(elem, helperMsg){
	if(elem.value == "Please Choose"){
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
	else {
		return true;
	}
}

function emailValidator(elem, helperMsg){
	var emailExp =  /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
	if (elem.value.match(emailExp)) {
		return true;
	}
	else{
		elem.style.backgroundColor = 'red';
		elem.focus();
		return false;
	}
}

Het probleem wat ge nu hebt met de aanpassingen die ik heb gedaan is dat em nooit gesubmit zal worden, ook als er geen validatiefouten optreden. Dus ge gaat de returns van uw zelfgeschreven functies moeten opvangen in een boolean, en aan de hand van die boolean kijken of ge die 'e.preve..' uitvoert of niet.

nck2040 · 8 jan 2011

Thx, Zero Grav, ik heb het ondertussen anders opgelost in samenwerking met een klasgenoot, maar ik zal je aanpassingen zeker eens bekijken

Hier mag dus een slotje op!

Archief - Hulp bij form validatie

nck2040

Legacy Member

demon326

Legacy Member

nck2040

Legacy Member

scipicore

Legacy Member

nck2040

Legacy Member

Zero Grav

Legacy Member

nck2040

Legacy Member