Form Validation

Kligham · 29 mei 2009

Hallo,

Ik zit met een vervelend probleem, mijn form validatie wil maar niet lukken. Het gaat hier alleen maar over de error message die zou moeten gegeven worden bij gebruikersnaam!. Het gaat dus niet over email en message (k'moet eerst gebruikersnaam in orde krijgen.

Hier is mijn script:

Code:

<script type="text/javascript">
window.addEventListener?window.addEventListener('load',function () { 
		ray.customValidate({
			icon_okay_source:'images/icon_tick.gif', // Source of okay image
			icon_error_source:'images/icon_error.gif' // Source of error image
		});
	},false):
window.attachEvent('onload',function () {
		ray.customValidate({
			icon_okay_source:'images/icon_tick.gif', // Source of okay image
			icon_error_source:'images/icon_error.gif' // Source of error image
		});
	}); // FF : IE
	
window.onload=function() {
var status=['gebruikersnaam_status','email_status','message_status'];
for(var i=0; i<status.length; i++) {
    document.getElementById(status[i]).innerHTML='<img alt="leeg" src="images/leeg.png" height="20" width="20">';
    }
};

var ray = {
	okay:'',err:'',
	
	customValidate:function (obj) {
		this.okay=this.okay==''?obj.icon_okay_source:this.okay;
		this.err=this.err==''?obj.icon_error_source:this.err;
		
		var formBase = document.forms['form'];
		formBase.onsubmit = function () {
			var ge = this.elements['gebruikersnaam'],
			email = this.elements['email'],
			subject = this.elements['subject'],
			message = this.elements['message'];
			ray.restore(this);
			
			if (ge.value.length < 2 ) {
				ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
				return false;
			}
			
			if (ge.value.length > 7) {
				ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
				return false;
			}
			if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
				ray.showErrMsg('You should enter a valid e-mail address.',email.id+"_status");
				return false;
			}
			if (message.value.length < 20 ) {
				ray.showErrMsg('The message should have at least 20 characters.',message.id+"_status");
				return false;
			}
		}
	},
	
	getID:function (el) {
		return document.getElementById(el);
	},
	
	showErrMsg:function(msg,div) {
		var image = document.createElement('img');
		var el = ray.getID(div);
		var span = document.createElement('span');
		image.src=ray.err;
		image.style.verticalAlign='middle';
		image.alt = 'Error';
		image.title = 'Error';
		el.style.color='#f00';
		el.appendChild(image);
		el.appendChild(span.appendChild(document.createTextNode(' '+msg)));
	},
	
	showCheck:function (div) {
		var image = document.createElement('img');
		var el = ray.getID(div);
		image.src=ray.okay;
		image.style.verticalAlign='middle';
		image.alt = 'Passed';
		image.title = 'Passed';
		el.appendChild(image);
	},
	
	restore:function (el) {
		var form = el.elements;
		for (var i = 0 ; i < form.length; i++)
			if (this.getID(form[i].id+'_status'))
				this.getID(form[i].id+'_status').innerHTML = '';
	}
}

function checkField(el) {
	
	if (el.id.toLowerCase() == 'gebruikersnaam') {
		var ge = el;
		ray.getID(ge.id+"_status").innerHTML = '' ;
		if (ge.value.length < 2 )
			ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
		else if (ge.value.length > 7)
			ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
		else 
			ray.showCheck(ge.id+'_status');	
	}
	
	if (el.id.toLowerCase() == 'email') {
		var email = el;
		ray.getID(email.id+"_status").innerHTML = '' ;
		if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
			ray.showErrMsg('You should enter a valid e-mail address.',email.id+"_status");
			return false;
		}
		else 
			ray.showCheck(email.id+'_status');	
	}
	
	if (el.id.toLowerCase() == 'message') {
		var message = el;
		ray.getID(message.id+"_status").innerHTML = '' ;
		if (message.value.length < 20 ) {
			ray.showErrMsg('The message should have at least 20 characters.',message.id+"_status");
			return false;
		}
		else
			ray.showCheck(message.id+'_status');
	}
}
</script>
</HEAD>
<BODY onSubmit="checkIt(this); return false">
<form method = "post" action="">
<table width = "300" bgcolor="#cccccc" >
<tr>
	<td colspan="2">Gelieve de volgende velden in te vullen:</td>
</tr>
<tr>
	<td>Gebruikersnaam: <br />(Tussen 2 en 16 characters)</td>
	<td><input type = "text" id = "gebruikersnaam" name = "gebruikersnaam" maxlength = "16" width = "43" onChange="checkField(document.form.gebruikersnaam);"></td>
	<td width="470"><div id="gebruikersnaam_status"></div></td>
	
<tr>
	<td>Wachtwoord: <br />(Minimaal 8 tekens)</td>
	<td><input type = "password" name = "wachtwoord" maxlength = "20"/></td>
</tr>
<tr>
	<td>Bevestiging wachtwoord:</td>
	<td><input type = "password" name = "wachtwoord_controle" maxlength = "20"/></td>
</tr>
<tr>
	<td>Emailadres:</td>
	<td><input type = "text" name = "emailadres" onChange="checkIt(this.form)" /></td>
</tr>
<tr>
	<td>Voornaam:</td>
	<td><input type = "text" name = "voornaam" onChange="checkIt(this.form)"/></td>
</tr>
<tr>
	<td>Achternaam:</td>
	<td><input type = "text" name = "achternaam" onChange="checkIt(this.form)" /></td>
</tr>
<tr>
	<td>Straat:</td>
	<td><input type = "text" name = "straat" onChange="checkIt(this.form)" /></td>
</tr>
<tr>
	<td>Huisnummer:</td>
	<td><input type = "text" name = "huisnummer" onChange="checkIt(this.form)"/></td>
</tr>
<tr>
	<td>Bus:</td>
	<td><input type = "text" name = "bus" onChange="checkIt(this.form)" /></td>
</tr>
<tr>
	<td>Gemeente:</td>
	<td><input type = "text" name = "gemeente" onChange="checkIt(this.form)" /></td>
</tr>
<tr>
	<td>Postcode:</td>
	<td><input type = "text" name = "postcode" onChange="checkIt(this.form)" /></td>
</tr>
</table>
</form>
</BODY>
</HTML>

Ik vind de fout niet. Bij het begin is het symbool aanwezig, het neutrale grijs die aangevoerd wordt door het onload gedeelte met leeg.png. Dit werkt wel, maar mijn controleren + tonen van de fout niet.

P.s.: ik heb de 'pics' ook toegevoegt moest iemand het script willen uitproberen om het te testen.

Hopelijk vindt iemand de fout waar ik tevergeefs achter zoek.

Grtz Kligham

Kligham · 30 mei 2009

Het probleem is van de baan, k'heb het probleem gevonden. Nu is er echter nog iets die mij tegenhoudt. Ik wil namelijk de inhoud van 2 velden met elkaar vergelijken in javascript, maar het lukt mij niet.

Mijn code ziet eruit als volgt (het belangrijke gedeelte staat onderaan de code) :

Code:

<!--
window.addEventListener?window.addEventListener('load',function () { 
		ray.customValidate({
			icon_okay_source:'images/vinkje.png', // Source of okay image
			icon_error_source:'images/icon_error.gif' // Source of error image
		});
	},false):
window.attachEvent('onload',function () {
		ray.customValidate({
			icon_okay_source:'images/vinkje.png', // Source of okay image
			icon_error_source:'images/icon_error.gif' // Source of error image
		});
	}); // FF : IE
	
window.onload=function() {
var status=['gebruikersnaam_status', 'wachtwoord_status', 'wachtwoord_controle_status','emailadres_status','voornaam_status', 'achternaam_status', 'straat_status', 'huisnummer_status', 'gemeente_status', 'postcode_status'];
for(var i=0; i<status.length; i++) {
    document.getElementById(status[i]).innerHTML='<img alt="leeg" src="images/leeg.png" height="20" width="20">';
    }
};

var ray = {
	okay:'',err:'',
	
	customValidate:function (obj) {
		this.okay=this.okay==''?obj.icon_okay_source:this.okay;
		this.err=this.err==''?obj.icon_error_source:this.err;
		
		var formBase = document.forms['form'];
		formBase.onsubmit = function () {
			var ge = this.elements['gebruikersnaam'],
			email = this.elements['email'],
			subject = this.elements['subject'],
			message = this.elements['message'];
			ray.restore(this);
			
			if (ge.value.length < 2 ) {
				ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
				return false;
			}
			
			if (ge.value.length > 7) {
				ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
				return false;
			}
			if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
				ray.showErrMsg('You should enter a valid e-mail address.',email.id+"_status");
				return false;
			}
			if (message.value.length < 20 ) {
				ray.showErrMsg('The message should have at least 20 characters.',message.id+"_status");
				return false;
			}
		}
	},
	
	getID:function (el) {
		return document.getElementById(el);
	},
	
	showErrMsg:function(msg,div) {
		var image = document.createElement('img');
		var el = ray.getID(div);
		var span = document.createElement('span');
		image.src=ray.err;
		image.style.verticalAlign='middle';
		image.alt = 'Error';
		image.title = 'Error';
		el.style.color='#f00';
		el.appendChild(image);
		el.appendChild(span.appendChild(document.createTextNode(' '+msg)));
	},
	
	showCheck:function (div) {
		var image = document.createElement('img');
		var el = ray.getID(div);
		image.src=ray.okay;
		image.style.verticalAlign='middle';
		image.alt = 'Passed';
		image.title = 'Passed';
		el.appendChild(image);
	},
	
	restore:function (el) {
		var form = el.elements;
		for (var i = 0 ; i < form.length; i++)
			if (this.getID(form[i].id+'_status'))
				this.getID(form[i].id+'_status').innerHTML = '';
	}
}

function checkField(el) {
	
	if (el.id.toLowerCase() == 'gebruikersnaam') {
		var gebruiker = el;
		ray.getID(gebruiker.id+"_status").innerHTML = '' ;
		if (gebruiker.value == null || gebruiker.value == '')
			ray.showErrMsg('Gebruikersnaam: Het veld is leeg.',gebruiker.id+"_status");
		else if (gebruiker.value.length < 2 )
			ray.showErrMsg('Gebruikersnaam: Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',gebruiker.id+"_status");
		else if (gebruiker.value.length > 16)
			ray.showErrMsg('Gebruikersnaam: Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',gebruiker.id+"_status");
		else if (!gebruiker.value.match(/^[a-z0-9\s]+$/i))
			ray.showErrMsg('Gebruikersnaam: Enkel letters, cijfers en spaties zijn toelaten.',gebruiker.id+"_status");
		else 
			ray.showCheck(gebruiker.id+'_status');	
	}
	
	if (el.id.toLowerCase() == 'wachtwoord') {
		var wachtwoord = el;
		ray.getID(wachtwoord.id+"_status").innerHTML = '' ;
		if (wachtwoord.value == null || wachtwoord.value == '')
			ray.showErrMsg('Wachtwoord: Het veld is leeg.',wachtwoord.id+"_status");
		else if (wachtwoord.value.length < 8 )
			ray.showErrMsg('Wachtwoord: Uw wachtwoord moet uit minimaal 8 tekens bestaan.',wachtwoord.id+"_status");
		else if (wachtwoord.value.length > 20)
			ray.showErrMsg('Wachtwoord: Uw wachtwoord mag niet meer dan 20 tekens bevatten.',wachtwoord.id+"_status");
		else if (!wachtwoord.value.match(/^[a-zA-Z0-9]+$/))
			ray.showErrMsg('Wachtwoord: Enkel letters en cijfers zijn toegelaten.',wachtwoord.id+"_status");
		else if (wachtwoord.value == gebruiker.value)
			ray.showErrMsg('Wachtwoord: Het opgegeven wachtwoord komt overeen met de gebruikersnaam, wat niet toegelaten is.',wachtwoord.id+"_status");
		else 
			ray.showCheck(wachtwoord.id+'_status');	
	}
	
	if (el.id.toLowerCase() == 'emailadres') {
		var email = el;
		ray.getID(email.id+"_status").innerHTML = '' ;
		if (!email.value.match(/^([a-z0-9])([\w\.\-\+])+([a-z0-9])\@(([\w\-]?)+\.)+([a-z]{2,4})$/i)) {
			ray.showErrMsg('Emailadres: Uw emaildres voldoet niet aan de voorwaarden.',email.id+"_status");
			return false;
		}
		else 
			ray.showCheck(email.id+'_status');	
	}

}
//-->

Het gaat hem om dit stuk:

else if (wachtwoord.value == gebruiker.value)
ray.showErrMsg('Wachtwoord: Het opgegeven wachtwoord komt overeen met de gebruikersnaam, wat niet toegelaten is.',wachtwoord.id+"_status");

ik heb er geen flauw benul van hoe het zou moeten. gebruiker.value gebruiken van de vorige deelfunctie werkt niet.

Iemand enig idee?

Grtz

Form Validation

Kligham

Gebruiker

Bijlagen

Kligham

Gebruiker

Nieuwste berichten

Wij waarderen jouw privacy