Implementatie Javascript

Status
Niet open voor verdere reacties.
Kligham

Kligham

Gebruiker
Lid geworden
7 jan 2009
Berichten
389
Hallo,

Ik was al een heel eindje terug klaar met mijn PHP-script. Nu had ik besloten om de pagina iets aantrekkelijker te maken d.m.v. javascript. Ik weet niet waar het fout loopt, maar ik vermoed met de implementatie ervan in PHP (vandaar dat ik het in het PHP-forum post).

Ziehier mijn verschillende scripts:

Output_fns.php (het visuele):
PHP: 
<?php
function html_header ($titel){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title><?php echo $titel; ?></title>
<?php
}

function html_body (){
?>
</head>
<body>
<img src = "test.jpg" alt = "test logo" border = "0"
	 align = "left" height = "53" width = "50" />
<h1>Deze website is nog onder constructie!</h1>
<?php
}

function html_registratie($gebruikersnaam, $emailadres , $voornaam , $achternaam , $straat , $huisnummer , $bus , $gemeente , $postcode , $land , $telefoon_gsm_nummer){
?>
<h2>Een account aanmaken</h2>
<p>Met dit account heb je toegang tot alle delen op deze website en de bijbehorende toepassingen</p>
<form method = "post" action="">
<table width ="700" bgcolor="#cccccc" >
<tr>
	<td colspan="2">Gelieve de volgende velden in te vullen:</td>
</tr>
<tr>
	<td width = "300">Gebruikersnaam: <br />
	<input type = "text" name = "gebruikersnaam" id = "gebruikersnaam" value = "<?php echo $gebruikersnaam; ?>" size = "35" onChange="JavaScript: checkField(document.form.gebruikersnaam);"/></td>
    <td valign="bottom"><div id="gebruikersnaam_status"></div></td>
<tr>
	<td width = "300">Wachtwoord: <br />
	<input type = "password" name = "wachtwoord" id = "wachtwoord" size = "35" onChange="JavaScript: checkField(document.form.wachtwoord);"/></td>
    <td valign="bottom"><div id="wachtwoord_status"></div></td>
</tr>
<tr>
	<td width = "300">Bevestiging wachtwoord: <br />
	<input type = "password" name = "wachtwoord_controle" id = "wachtwoord_controle" size = "35" onChange="JavaScript: checkField(document.form.wachtwoord_controle);"/></td>
    <td valign="bottom"><div id="wachtwoord_controle_status"></div></td>
</tr>
<tr>
	<td width = "300">Emailadres: <br />
	<input type = "text" name = "emailadres" id = "emailadres" value = "<?php echo $emailadres; ?>" size = "35" onChange="JavaScript: checkField(document.form.emailadres);" /></td>
    <td valign="bottom"><div id="emailadres_status"></div></td>
</tr>
<tr>
	<td width = "300">Voornaam: <br />
	<input type = "text" name = "voornaam" id = "voornaam" value = "<?php echo $voornaam; ?>" size = "35" onChange="JavaScript: checkField(document.form.voornaam);"/></td>
    <td valign="bottom"><div id="voornaam_status"></div></td>
</tr>
<tr>
	<td width = "300">Achternaam: <br />
	<input type = "text" name = "achternaam" id = "achternaam" value = "<?php echo $achternaam; ?>" size = "35" onChange="JavaScript: checkField(document.form.achternaam);" /></td>
    <td valign="bottom"><div id="achternaam_status"></div></td>
</tr>
<tr>
	<td width = "300">Straat: <br />
	<input type = "text" name = "straat" id = "straat" value = "<?php echo $straat; ?>" size = "35" onChange="JavaScript: checkField(document.form.straat);"/></td>
    <td valign="bottom"><div id="straat_status"></div></td>
</tr>
<tr>
	<td width = "300">Huisnummer: <br />
	<input type = "text" name = "huisnummer" id = "huisnummer" value = "<?php echo $huisnummer; ?>" size ="35" onChange="JavaScript: checkField(document.form.huisnummer);"/></td>
    <td valign="bottom"><div id="huisnummer_status"></div></td>
</tr>

enz...

Hier een klein deel uit mijn registratie script:
PHP: 
} else {

    html_header('Registratie');
	?>
	<script type="text/javascript" src = 'registratie.js'></script>
	<?php
	html_body();

    html_registratie($gebruikersnaam, $emailadres , $voornaam , $achternaam , $straat , $huisnummer , $bus , $gemeente , $postcode , $land , $telefoon_gsm_nummer);

    html_footer();
}

En hier het javascript zelf:

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', 'land_status', 'telefoon_gsm_nummer_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 == null || ge.value == '')
			ray.showErrMsg('Gebruikersnaam: Het veld is leeg.',ge.id+"_status");
		else if (ge.value.length < 2 )
			ray.showErrMsg('Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.',ge.id+"_status");
		else if (ge.value.length > 16)
			ray.showErrMsg('Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.',ge.id+"_status");
		else if (!ge.value.match(/^([a-z0-9])\s$/))
			ray.showErrMsg('Gebruikersnaam: Enkel letters, cijfers en spaties zijn toegelaten.',ge.id+"_status");
		else 
			ray.showCheck(ge.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('You should enter a valid e-mail address.',email.id+"_status");
			return false;
		}
		else 
			ray.showCheck(email.id+'_status');	
	}
	
	if (el.id.toLowerCase() == 'wachtwoord') {
		var wachtwoord = el;
		ray.getID(wachtwoord.id+"_status").innerHTML = '' ;
		if (wachtwoord.value.length < 20 ) {
			ray.showErrMsg('The message should have at least 20 characters.',wachtwoord.id+"_status");
			return false;
		}
		else
			ray.showCheck(message.id+'_status');
	}
	if (el.id.toLowerCase() == 'wachtwoord_controle') {
		var wachtwoord = el;
		ray.getID(wachtwoord.id+"_status").innerHTML = '' ;
		if (wachtwoord.value.length < 20 ) {
			ray.showErrMsg('The message should have at least 20 characters.',wachtwoord.id+"_status");
			return false;
		}
		else
			ray.showCheck(wachtwoord.id+'_status');
	}
}

Dit is het resultaat tot nog toe (zie foto). De neutrale tekens worden wel getoond (door regel 14 - 18, zie window onload.function). Maar als er iets moet veranderen met De onChange event, vindt niet plaats. De vraag is nu waarom?
 

Bijlagen

  • Registratie.gif
    Registratie.gif
    26,5 KB · Weergaven: 28
Laatst bewerkt:
Hai, Ik heb je scriptjes bekeken en getest.

de volgende items heb ik gewijzigd waarna er in ieder geval meer gebeurde dan hiervoor:

in Output_fns.php
- het invul formulier de naam form2 gegeven (name="form2")
- De onChange functie verwijderd en vervangen door onBlur.(onBlur="checkField(document.form2.gebruikersnaam);")

in registratie.js
het volgende aan het begin van de Checkfield functie het volgende geplaatst:

if(el.value == 'sjenk'){el.value='wassaap'}
var joep = el.value.toLowerCase();
el.value = joep;

en die werkt, als ik hoofdletters type en op een ander veld klik dan worden het kleine letters.

Ik denk dat je vanaf hier wel weer werkend kan krijgen

suc6!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan