Grafische error handling

Status
Niet open voor verdere reacties.
Kligham

Kligham

Gebruiker
Lid geworden
7 jan 2009
Berichten
389
Hallo,

Mijn registratie-gedeelte (php-gedeelte) van mijn website is zo goed als klaar. Nu wou ik het graag nog wat gaan verbeteren d.m.v. javascript. Nu is het zo dat als ik op registreer duw, mijn server alle fouten opsomt . Nu zou ik graag willen dat als men bijvoorbeeld hun gebruikersnaam invult en tabben naar het volgende gedeelte bvb hun wachtwoord invullen, Dat er een V-tje of een X-je tevoorschijnkomt.

Nu had ik een aantal vraagjes:

1) In welk formaat zet je zo'n V en X figuurtje? -> gaat dat met een .ico? of beter een .gif
2) Ik vroeg me af of je hoe je dit nu het best verwezenlijkt. Mijn server controleert nu alles. Moet je dan heel die error-checking helemaal weer uittypen in javascript of kan je bijvoorbeeld zeggen van: als php geen fout vindt, javascript een V-tje of een X-je laten verschijnen?

Het is een beetje raar uitgelegd waarschijnlijk, hopelijk verstaat men het ;p
 
Ik denk dat je wilt dat er realtime X'jes of V'tjes naast de invoer velden komen te staan als je een waarde hebt ingevuld?

Dat moet je niet met PHP doen maar compleet in Javascript. Nadat een waarde is veranderd kijk je of hij aan de regels voldoet en zo niet dan zet je er een X'je achter, anders een V'tje. Daarnaast moet PHP de waarde nog een keer controleren wanneer ze aangeleverd worden want Javascript is niet geschikt voor beveiliging.

Je moet geen .ico bestandjes gebruiken, die worden misschien niet erg goed ondersteund door alle browser/besturingssystemen. Gebruik .gif plaatjes als je IE6 wilt ondersteunen of PNG plaatjes als je partial transparancy wilt gebruiken :)
 
Glest zei:
Ik denk dat je wilt dat er realtime X'jes of V'tjes naast de invoer velden komen te staan als je een waarde hebt ingevuld?
Klik om te vergroten...

Jup, dat is idd wat ik zou willen. Ik heb nu al eventjes verder rondgesnuffelt en al een aantal aardige dingen tegen gekomen die mij op weg kunnen helpen. Nu ben ik toch op een probleempje gestoten.

Het is zo dat ik door PHP laat controleren of er al een dergelijke gebruikersnaam voorkomt in mijn mysql database. Nu heb ik daar effe zitten op zoeken en heb gelezen dat dit namelijk onmogelijk zou zijn met javascript. Dan vroeg ik mij af: dan kan ik dus niet controleren of het gebruikersnaam al genomen is. Dit zou dan gaan betekenen dat er een V-tje zal verschijnen, maar toch zal er geen registratie plaats vinden, want PHP zal dat gaan verbieden.

-> Hoemijk kan iemand me hier wat verder helpen :confused:
 
Kligham zei:
Het is zo dat ik door PHP laat controleren of er al een dergelijke gebruikersnaam voorkomt in mijn mysql database.
Klik om te vergroten...
yup... dat's logisch.

Kligham zei:
Nu heb ik daar effe zitten op zoeken en heb gelezen dat dit namelijk onmogelijk zou zijn met javascript.
Klik om te vergroten...
Ja, dat klopt. Javascript is client-side (wordt door de browser gedaan) en php is server-side (door de server gedaan)

Kligham zei:
Dan vroeg ik mij af: dan kan ik dus niet controleren of het gebruikersnaam al genomen is. Dit zou dan gaan betekenen dat er een V-tje zal verschijnen, maar toch zal er geen registratie plaats vinden, want PHP zal dat gaan verbieden.
Klik om te vergroten...

Kijk, wat Glest bedoelt is dat je via javascript, een php script aanroept - via AJAX (bah).
Even een voorbeeldje: http://www.vegras-studios.com/X/helpmij/validate/

Dit roept, op elke keyDown in het text-field deze php code aan:
PHP: 
<?php
function validate($name) {
  if($name == '') {
    return '';
  }

  if(strlen($name) < 3) {
    return "Username too short\n";
  }
  if(strlen($name) > 17) {
    return "Username too long\n";
  }

  switch($name) {
    case 'bob':
    case 'jim':
    case 'joe':
    case 'carol':
      return "Username already taken\n";
  }

  return "Username ok!\n";
}

echo validate($_REQUEST['name']);
?>
Nu is het stukje van de switch() met die namen natuurlijk een voorbeeld, maar daar zou je je query kunnen dumpen.


:thumb:
 
Je kunt eens Googleen op het gebruik van Ajax.

Je kunt met JavaScript namelijk (beetje kort door de bocht) inhoud van webpagina's ophalen middels een xmlHttpRequest.

De syntax is ongeveer zo:

PHP: 
// Creëer een XHR (xmlHTTPRequest) object, hier zul je een functie voor moeten 
// schrijven, die functie detectie gebruikt om een XHR te return afhankelijk van de browser
xmlHttp = createXHR();

// stop de gewenste username in een variabele (ik gebruik hier een inputveld met id "username"
var username = document.getElementById('username').value;

// Open de XHR, syntax:    XHR.open(string method, string src, boolean async)
xmlHttp.open("GET", "checkUsername.php?username=" + username, true);

// Schrijf een functie die de response opvangt en verwerkt
xmlHttp.onreadystatechange = function(){

  // kijk of de "readyState" gelijk is aan 4 (voltooide request)
  // en de "status" gelijk is aan 200 (statuscode voor normaal functioneren geloof ik)
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

    // Kijk of de code die teruggestuurd is gelijk is aan "Vrij"
    if(xmlHttp.responseText == "Vrij"){

      // Laat een vinkje zien om aan te duiden dat de gebruikersnaam nog vrij is
    } else {

      // Laat een kruisje zien om aan te duiden dat de gebruikersnaam in gebruik is
    }
  }
}

// verzend de request
xmlHttp.send(null);

Nu zul je dus nog een PHP pagina moeten creëren die kijkt of de username vrij is. Als dat zo is moet er "Vrij" geechood worden, zo niet moet er iets anders (maakt niet uit wat) geechood worden.

Ik zal nog even kijken of ik een functie kan vinden om je XHR te creëren.

EDIT:

Deze functie kun je gebruiken voor het creëren van je XHR.

PHP: 
function createXHR(){
var xmlHttp = false;
try	{
	xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
	try{
		xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	}	catch (E) {
		xmlHttp = false;
	}
}
if(!xmlHttp && typeof XMLHttpRequest != 'undefined'){
	xmlHttp = new XMLHttpRequest;
}
return xmlHttp;
}
 
Laatst bewerkt:
Dank je wel voor jullie beide uitgebreide en snelle responses. Ik zal mij hier eens een tijdje mee bezig houden en op zitten zoeken . Thx:thumb:
 
Vegras zei:
yup... dat's logisch.


Ja, dat klopt. Javascript is client-side (wordt door de browser gedaan) en php is server-side (door de server gedaan)



Kijk, wat Glest bedoelt is dat je via javascript, een php script aanroept - via AJAX (bah).
Even een voorbeeldje: http://www.vegras-studios.com/X/helpmij/validate/

Dit roept, op elke keyDown in het text-field deze php code aan:
PHP: 
<?php
function validate($name) {
  if($name == '') {
    return '';
  }

  if(strlen($name) < 3) {
    return "Username too short\n";
  }
  if(strlen($name) > 17) {
    return "Username too long\n";
  }

  switch($name) {
    case 'bob':
    case 'jim':
    case 'joe':
    case 'carol':
      return "Username already taken\n";
  }

  return "Username ok!\n";
}

echo validate($_REQUEST['name']);
?>
Nu is het stukje van de switch() met die namen natuurlijk een voorbeeld, maar daar zou je je query kunnen dumpen.


:thumb:
Klik om te vergroten...

Hoe ziet je 'ajax' code eruit als ik vragen mag :eek: ?
Ik heb je tutorial eens doorgelezen maar daar gebruik je nergens geen gebruik van PHP of ben ik hierin verkeerd, dus zou het eens handig zijn om te zien hoe je die link van je website gemaakt hebt. :cool:
Mijn V-tje en X-je zijn eindelijk gemaakt met photoshop en nu moet het programmeer werk nog gebeuren:eek:
 
Laatst bewerkt:
#
// Open de XHR, syntax: XHR.open(string method, string src, boolean async)
xmlHttp.open("GET", "checkUsername.php?username=" + username, true);
{
Klik om te vergroten...

Wil dat dan zeggen dat ik mijn form niet mag de action Post laten gebruiken maar GET?

#
// Schrijf een functie die de response opvangt en verwerkt
xmlHttp.onreadystatechange = function(){
Klik om te vergroten...

Moet hier dan de functie komen van mijn php script die bijvoorbeeld de invoer van het veld gebruikersnaam moet controleren?
 
Laatst bewerkt:
Ik heb daar GET gebruikt, omdat dat in dit soort gevallen het makkelijkst werkt. Dat is puur en alleen voor de XHR. Verder niet voor je formulier. Die kun je gewoon blijven gebruiken op de manier zoals je hem altijd gebruikt.

Daar komt niet je PHP functie. Daar komt een javascript functie die eerst controleert of de XHR goed verzonden is en daarna iets daarmee uitvoert.

In dit geval moet je zorgen dat je PHP script een waarde echood ("Vrij" bijvoorbeeld als de username beschikbaar is) en dan controleer je met javascript of de waarde van xmlHttp.responseText (dat is alles wat je script heeft geëchood) gelijk is aan "Vrij".

Je kunt geen PHP in je javascript gebruiken.
 
Dus als ik het goed begrijp moet ik deze PHP code:

PHP: 
function valid_gebruikersnaam($gebruikersnaam, $minlength = 2, $maxlength = 16){

	$gebruikersnaam_check = trim($gebruikersnaam);

    if (empty($gebruikersnaam_check)){

        return 'Gebruikersnaam: Het veld is leeg.'; // Het veld is leeg
    }

    if (strlen($gebruikersnaam_check) > $maxlength){

		return 'Gebruikersnaam: Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.'; // De gebruikersnaam is te lang
    }

    if (strlen($gebruikersnaam_check) < $minlength){

        return 'Gebruikersnaam: Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.'; // De gebruikersnaam is te kort
    }

    //Connectie met database
    $connection = db_connect();

    //Controle of gebruikersnaam uniek is
    $query = $connection->query("select * from temp_gebruiker where gebruikersnaam ='" . $gebruikersnaam_check. "'");
    if (!$query){
    	$registratie_fouten[] = 'De query kon niet uitgevoerd worden.';
    }

    if ($query->num_rows > 0){
    	return 'Gebruikersnaam: De gebruikersnaam ' . $gebruikersnaam_check . ' is al in gebruik.'; //Er is al zo'n gebruikersnaam aanwezig
    }


    $check = ereg('^[[:alnum:][:blank:]]+$', $gebruikersnaam_check); //A-Z, a-z, 0-9 en spaties zijn toegelaten

    if ($check)
    {
        return true; // Er zijn geen verkeerde tekens gevonden
    } else
    {
        return 'Gebruikersnaam: Enkel letters, cijfers en spaties zijn toegelaten.'; //Er zijn verkeerde tekens gevonden
    }
}

Helemaal gaan herschrijven in javascript taal. En enkel hetgeen waarvoor ik in mijn PHP functie connectie maak naar mijn database, moet ik gebruik gaan maken van je XHR 'Ajax' gedoe?
 
Ja, maar je moet ook met PHP de waardes controleren. Het javscript gedeelte is enkel en alleen voor het gebruikersgemak. Om ervoor te zorgen dat de data die je krijgt ook echt voldoet aan de eisen MOET je php gebruiken, en niet javascript.
 
Je hoeft de functie niet helemaal te herschrijven. Je kunt de waarde uit je PHP script gewoon laten echoën. Die komt dan in de xmlHttp.responseText variabele in JavaScript. Die kun je dan in een alert stoppen of wat dan ook.
 
Glest zei:
Ja, maar je moet ook met PHP de waardes controleren. Het javscript gedeelte is enkel en alleen voor het gebruikersgemak. Om ervoor te zorgen dat de data die je krijgt ook echt voldoet aan de eisen MOET je php gebruiken, en niet javascript.
Klik om te vergroten...

Ja, dat weet ik. Mijn hele registratie script, die alle invoer nauwkeurig controleert, zal dat steeds blijven doen, het enige waarvoor ik die ajax nodig hebt is om een V'tje en X-je te verkrijgen. PHP zal blijven controleren! :cool:

ErikBooy007 zei:
Je hoeft de functie niet helemaal te herschrijven. Je kunt de waarde uit je PHP script gewoon laten echoën. Die komt dan in de xmlHttp.responseText variabele in JavaScript. Die kun je dan in een alert stoppen of wat dan ook.
Klik om te vergroten...

Kan je dan bijvoorbeeld het volgende doen: In mijn hierboven geschreven functie, returnt hij steeds false als er iets niet klopt. Kan je dan een return-false doorgeven aan je javascript die dan weet dat hij een X-je moet tonen (in het ander geval een V-tje natuurlijk?) Maar javascript zou dan ook moeten weten dat die return enkel geldt voor bijvoorbeeld het veld gebruikersnaam, is dit mogelijk?
 
Laatst bewerkt:
PHP: 
function valid_gebruikersnaam($gebruikersnaam, $minlength = 2, $maxlength = 16){

	$gebruikersnaam_check = trim($gebruikersnaam);

    if (empty($gebruikersnaam_check)){

        return 'Gebruikersnaam: Het veld is leeg.'; // Het veld is leeg
    }

    if (strlen($gebruikersnaam_check) > $maxlength){

		return 'Gebruikersnaam: Uw gebruikersnaam mag niet meer dan 16 tekens bevatten.'; // De gebruikersnaam is te lang
    }

    if (strlen($gebruikersnaam_check) < $minlength){

        return 'Gebruikersnaam: Uw gebruikersnaam moet uit minimaal 2 tekens bestaan.'; // De gebruikersnaam is te kort
    }

    //Connectie met database
    $connection = db_connect();

    //Controle of gebruikersnaam uniek is
    $query = $connection->query("select * from temp_gebruiker where gebruikersnaam ='" . $gebruikersnaam_check. "'");
    if (!$query){
    	$registratie_fouten[] = 'De query kon niet uitgevoerd worden.';
    }

    if ($query->num_rows > 0){
    	return 'Gebruikersnaam: De gebruikersnaam ' . $gebruikersnaam_check . ' is al in gebruik.'; //Er is al zo'n gebruikersnaam aanwezig
    }


    $check = ereg('^[[:alnum:][:blank:]]+$', $gebruikersnaam_check); //A-Z, a-z, 0-9 en spaties zijn toegelaten

    if ($check)
    {
        return true; // Er zijn geen verkeerde tekens gevonden
    } else
    {
        return 'Gebruikersnaam: Enkel letters, cijfers en spaties zijn toegelaten.'; //Er zijn verkeerde tekens gevonden
    }
}

echo (valid_gebruikersnaam($_GET['username'])) ? "Vrij" : "Niet Vrij";

In de xmlHttp.responseText staat dan Vrij als de functie true returnt en Niet Vrij als de functie geen true returnt.

In javascript kun je dan weer doen wat ik in mijn eerste post al zei, dan kun je bijvoorbeeld doen:

PHP: 
document.getElementById('valid_gebruiker').src = 'vinkje.png';

waar valid_gebruiker de id van je afbeelding is, bijvoorbeeld.
 
Tja je kunt Ajax gebruiken voor alle controles, maar het is meestal een stuk sneller om simpele checks door javascript uit te laten voeren. Aangezien java ook regex ondersteund kan er best veel (alles eigenlijk, zolang het maar niks met de database heeft te maken).
 
Ja precies, maar aangezien het oorspronkelijke doel was om te kijken of de username uniek was. En dan zijn die overige checks meteen mooi meegenomen.
 
Ik zie dat er inderdaad "Nee" had moeten staan waar ik "Ja" zei, want nu ik het script heb gelezen blijkt het inderdaad alleen maar over de gebruikersnaam te gaan. Mijn fout :rolleyes:

Maar er zijn nog meer velden die ook gecontroleerd moeten worden volgens de eerste post. En daarvoor kun je beter alleen Javascript gebruiken zonder XHR als je de database niet nodig hebt.
 
Laatst bewerkt:
Glest zei:
Ik zie dat er inderdaad "Nee" had moeten staan waar ik "Ja" zei, want nu ik het script heb gelezen blijkt het inderdaad alleen maar over de gebruikersnaam te gaan. Mijn fout :rolleyes:

Maar er zijn nog meer velden die ook gecontroleerd moeten worden volgens de eerste post. En daarvoor kun je beter alleen Javascript gebruiken zonder XHR als je de database niet nodig hebt.
Klik om te vergroten...

Het gaat hem hier om exact 13 velden (zie foto1). Nu zoals in mijn vorige post, had je een script die alle controles deed ENKEL en ALLEEN voor gebruikersnaam. Het is namelijk zo dat er dus 13 zijn => voor elk veld 1 'grote' functie.

Nu het grote punt van discussie is de vraag of het eigenlijk nodig is om nog eens alles door javascript te laten controleren ook (naast mijn PHP-script). Is het niet nodig, dan is de vraag of je mogelijkheid die je 3 posts hoger aanhaf, te gebruiken voor alle 13 de velden. Lukt dit niet, hoe moet het dan wel? Alles voor een tweede keer laten controleren door javascript?

Het enige wat voor mijn van doen is dat er V-tjes of X-jes moeten komen, als het lukt. Nu is alleen de vraag of het lukt en welke de beste manier is om het te voltooien?

EDIT/ was foto vergeten:(
 

Bijlagen

  • Foto1.jpg
    Foto1.jpg
    64,3 KB · Weergaven: 53
Laatst bewerkt:
K'ben begonnen met eerst een beetje te gaan spelen met de iets wat simpelere validatie gebeuren alvorens me met 'ajax' te gaan bezighouden. Nu aangezien ik er nog maar juist mee begonnen ben, zit ik nu toch alweer met probleempjes. Ziehier mijn 'script':

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Text Object Select/Focus</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validateUsername(gebruikersnaam) {
    var error = "";
    var illegalChars = /\W/; // allow letters, numbers, and underscores
 
    if (gebruikersnaam.value == "") {
        gebruikersnaam.style.background = 'Yellow'; 
        error = "You didn't enter a username.\n";
    } else if ((gebruikersnaam.value.length < 5) || (gebruikersnaam.value.length > 15)) {
        gebruikersnaam.style.background = 'Yellow'; 
        error = "The username is the wrong length.\n";
    } else if (illegalChars.test(gebruikersnaam.value)) {
        gebruikersnaam.style.background = 'Yellow'; 
        error = "The username contains illegal characters.\n";
    } else {
        gebruikersnaam.style.background = 'White';
    }
    return error;
}
-->
</SCRIPT>
</HEAD>
<BODY onSubmit="checkIt(this); return false">
<form method = "post" action="">
<table 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" name = "gebruikersnaam" maxlength = "16" onChange="validateUsername(gebruikersnaam)"/></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>

Wat zijn de problemen:

1) De error wordt niet gedisplayed. Nergens. Het is de bedoeling dat hij die error zou moeten melden juist onder het vakje (waardoor hier in principe die andere vakjes opzij zouden moeten geduwd worden). Ik weet niet of dit mogelijk is?
2) Hoe roep ik een foto aan (vinkje.png als het juist is + hij moet juist verschijnen naast het vakje). Op het internet had ik gevonden dat je het zo moet doen <img src ="" name =""> maar dit heeft geen resultaat opgeleverd.
3) Controleren op empty gebeurd niet. Dat kan mij in principe ook niet verwonderen aangezien er in principe niets veranderd en dus mijn onchange event niet aanslaat. Hoe los je dit dan op?
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan