[AJAX] Form validation

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

- -

- -

26/07/2008 18:18:00
Quote Anchor link
Goedenavond!

Ik zat daarstraks met een probleem, dat ik toch kon oplossen. Ik heb een klein script die de checkt of de opgegeven gebruikersnaam al bestaat ja of nee. Ik heb dit opgelost dmv een klein plaatje, aangezien je in een XML object geen HTML tags kan gebruiken.

Om hiermee verder te gaan, wil ik ervoor zorgen dat de gebruiker die zich aanmeld niet verder kan gaan met het invullen van het formulier, als de gebruikersnaam bezet is. En om dáárna nog verder te gaan, wil ik checken of de opgegeven e-mail adressen gelijk zijn en of de opgegeven wachtwoorden gelijk zijn.

Dus alles op een rijtje:
- Als de gebruikersnaam niet is ingevuld of bezet is, moeten de overige inputs worden uitgezet.
- Als de opgegeven e-mail adressen niet kloppen of niet zijn ingevuld, moet de wachtwoord inputs worden uitgezet.
- Als de opgegeven wachtwoorden niet kloppen of niet zijn ingevuld, kan de gebruiker niet op de submit knop registeren klikken.

Aangezien ik me nu nog aan het orienteren ben op het gebied van AJAX en JavaScript, vraag ik jullie hulp. Ik hoop dat jullie ergens nog een dergelijk script hebben liggen of kunnen helpen om dit te realiseren.

Wat ik op dit moment heb is het volgende:
AJAX:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript">
    function username_check(userid)
    {
        if(window.XMLHttpRequest)
        {
            http = new XMLHttpRequest();
        }
        else
        if(window.ActiveXObject)
        {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }
        else
        {
            alert('Uw browser is out-of-date!');
        }

        handle = document.getElementById(userid);
        if(handle.value.length > 0)
        {
            var url = 'check.php?username=' + encodeURIComponent(handle.value);
            http.open('GET', url, true);
            http.send(null);
            http.onreadystatechange = username_result;
        }
        else
        {
            document.getElementById('username_result').innerHTML = '';
        }
    }

    function username_result()
    {
        if(http.readyState == 4)
        {
            var xmlObj = http.responseXML;
            var html = xmlObj.getElementsByTagName('result').item(0).firstChild.data;
            document.getElementById('username_result').innerHTML = '<img src="../images/gebruikersnaam_'+html+'.png" />';
        }
    }
</script>


PHP: (check.php)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?php
// enkele includes die niet relevant zijn voor jullie :)
if(isset($_GET['username']))
{

        $username = mysql_real_escape_string($_GET['username']);
        $count = mysql_num_rows(mysql_query("SELECT gebruikersnaam FROM gebruikers WHERE gebruikersnaam = '".$username."'"));
        header('Content-Type: text/xml');
        header('Pragma: no-cache');
        echo '<?xml version="1.0" encoding="UTF-8"?>';
        echo '<result>';
        if($count)
        {

            echo 'bezet';
        }

        else
        {
            echo 'vrij';
        }

        echo '</result>';
}

else
{
    echo 'Wat probeer jij te doen?';
}

?>


Een online voorbeeld heb ik niet, aangezien het gehele project op mijn laptop staat (localhost dus.) De bijbehorende HTML is als volgt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<input id="username" style="width:150px" type="text" name="username" onchange="username_check(\'username\')" />
<span id="username_result"></span>

waar de <span> het plaatje laat zien of de gebruikersnaam is bezet ja of nee.

Edit: Voor degenen die het niet zien, in het AJAX script laat hij bij de functie username_result() een plaatje zien, afhankelijk van het XML object laat hij vrij of bezet zien :)

Ik hoor het graag!

Groeten,
Chris H.

(Voor de geinteresseerden, ik ben bezig met een nieuw op te starten community om aan het einde van de dag of gewoon even tussendoor kunt kijken om even te "relaxen" en lachen)
Gewijzigd op 01/01/1970 01:00:00 door - -
 
PHP hulp

PHP hulp

28/03/2024 18:12:28
 
Emmanuel Delay

Emmanuel Delay

26/07/2008 18:56:00
Quote Anchor link
Kijk hier eens naar mijn posts:
http://phphulp.nl/forum/showtopic.php?cat=15&id=50783&page=

Zo gebruik ik Ajax. Het is een voorbeeld dat iets anders doet dan wat jij wil.

Ik gebruik http.responseText ipv. http.responseXML aangezien ik niet met xml werk.

Wat ik zou doen mocht ik jou zijn:
-Zet alle input velde op READONLY, zet de button op disabled

-In je php gedeelte kan je een gecodeerd bericht echo'en, bv 'gelukt' of 'mislukt'.

-in if(http.readyState == 4) zou ik de responseText controleren. Indien de response 'gelukt' is, kan je de readonly af zetten.

Zo kan je steeds verder alles enablen.

Denk er wel aan: vertrouw enkel wat op server kant komt. Ajax en styles kunnen door de gebruiker aangepast worden.

Ik zal eens zoeken of ik nog iets heb dat wat lijkt op een antwoord op je vraag.
 
- -

- -

26/07/2008 19:01:00
Quote Anchor link
Emmanuel:
-Zet alle input velde op READONLY, zet de button op disabled


Kun je dit nader verklaren?

Bedankt voor de overige suggesties, ik ga even kijken of ik wat met http.responseText kan doen!
 
Emmanuel Delay

Emmanuel Delay

26/07/2008 19:13:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
<input id="email" readonly="readonly" type="text" />
<input id="verzend" disabled="disabled" type="button" value="verzend"/>


Met javascript kan je die readonly en disabled dan uit zetten.

Even geduld voor een meer grondige uitleg.

Indien je echt ajax volop wil beheersen, kan je best JSON leren. Dan kan je objecten en arrays uitwisselen tussen php en javascript. Maar ... eerst lopen, dan vliegen.
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay
 
GaMer B

GaMer B

26/07/2008 19:23:00
Quote Anchor link
@iChris.nl, waarom het wiel opnieuw uitvinden als het wiel al uitgevonden is?

LiveValidation doet dit al voor je.
 
Jelmer -

Jelmer -

26/07/2008 19:28:00
Quote Anchor link
Wanneer je XML als antwoord wilt hebben, moet je er even voor zorgen dat je PHP server de juiste Content-Type header (application/xml of text/xml) meestuurt, anders wordt responseXML niet gevuld.


HTML kan je overigens wel binnen XML gebruiken. Je kan gewoon xhtml gebruiken, en domelements heen en weer duwen (tussen het document in de browser en het document in responseXML) of je gebruikt <![CDATA[<b>je html</b>]]> om een cdata-element in je XML te gooien. Dan kan je de value daarvan via innerHTML in je huidige document opnemen.
Gewijzigd op 01/01/1970 01:00:00 door Jelmer -
 
Emmanuel Delay

Emmanuel Delay

26/07/2008 21:44:00
Quote Anchor link
GaMer13 schreef op 26.07.2008 19:23:
... waarom het wiel opnieuw uitvinden als het wiel al uitgevonden is? ...


Omdat je anders zelf nooit iets zal leren misschien.
 
GaMer B

GaMer B

27/07/2008 09:23:00
Quote Anchor link
Emmanuel Delay schreef op 26.07.2008 21:44:
GaMer13 schreef op 26.07.2008 19:23:
... waarom het wiel opnieuw uitvinden als het wiel al uitgevonden is? ...


Omdat je anders zelf nooit iets zal leren misschien.

Dit vind ik een vrij onzinnig antwoord... En het was retorische vraag overigens.

Bij LiveValidation kun je ook een custom function maken, waarbij je dus zelf een callback functie kunt maken. Dit kan handig zijn in jouw geval, want je wilt ook kijken of de gebruiker bestaat. Je kunt in die callback functie een request doen naar een php bestand, vervolgens a.d.h.v. die gegevens true / false terug geven aan LiveValidation.
 
- -

- -

27/07/2008 21:25:00
Quote Anchor link
Ik heb het op een andere manier opgelost. Bedankt voor jullie tips!
 
Robert Deiman

Robert Deiman

27/07/2008 22:09:00
Quote Anchor link
@iChris.nl

Hoe heb je het opgelost? En nog iets, maak je nog gebruik van bijv. Jquery of Mootools? Dat maakt het allemaal zeker wel eenvoudiger ;)
 
Jason de Ridder

Jason de Ridder

27/07/2008 22:41:00
Quote Anchor link
en JSON
 
Emmanuel Delay

Emmanuel Delay

28/07/2008 19:02:00
Quote Anchor link
Het verheugt me dat de oplossing gevonden is.

Hier toch nog een voorbeeld met JSON.

index.php
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<?
$ajaxContent
= "";
switch ($_GET['pagina'])
  {
    case
'login':
    default:

      // formulier
      echo '
      <html>
        <script src="js.js" language="javascript" type="text/javascript"></script>
        <head>
          <title>Ajax voorbeeldje</title>
          <style>
            * { margin: 0; padding: 0;}
            #menu{height: 400px; width: 150px; padding: 3px; border: 1px solid #555555; float: left;}
            #content{height: 400px; width: 500px; padding: 3px; border: 1px solid #555555;}
          </style>
        </head>
        <body >
            <li><input type="text" id="naam" onChange="valideer(0);" /> naam </li>
            <li><input type="text" id="email" readonly="readonly" onChange="valideer(0);" /> e-mail </li>
            <li><input type="button" id="registreer" value="registreer" disabled="disabled" onClick="valideer(1);" />  </li>
        </body>
      </html>
      '
;
      break;
    case
'geregistreerd':
      echo 'geregistreerd';
      break;
    case
'valideer':
      $ajaxContent = array();
      $ajaxContent['naam'] = 0;
      $ajaxContent['email'] = 0;
      $ajaxContent['geregistreerd'] = 0;
      
      if ($_POST['naam'])
        {

          // vergelijk naam met login in DB
          // indien de naam vrij is:

            $ajaxContent['naam'] = 1;
        }

      if ($_POST['email'] && $ajaxContent['naam'])
        {

          // vergelijk e-mail met e-mail in DB
          // indien de e-mail vrij is:

            $ajaxContent['email'] = 1;
        }

      if ($_POST['verzend'] && $ajaxContent['naam'] && $ajaxContent['email'])
        {

            // registreer de gebruiker
            // $sql = 'INSERT INTO ...'

            $ajaxContent['geregistreerd'] = 1;
        }

      $content ='{"registreer":'. json_encode($ajaxContent) .'}';
      echo $content;
      break;
  }

?>


js.js
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//////////////////////////////////////////////////////
//ajax
var http = null;  // global

function createHTTPHandler()
{
    httphandler = false;
    // branch for native XMLHttpRequest object
    if(window.XMLHttpRequest)
    {
      try
      {
      httphandler = new XMLHttpRequest();
        } catch(e)
        {
      httphandler = false;
        }
    // branch for IE/Windows ActiveX version
    }
    else if(window.ActiveXObject)
    {
          try
          {
            httphandler = new ActiveXObject("Msxml2.XMLHTTP");
          } catch(e)
          {
            try
            {
                httphandler = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e)
            {
                httphandler = false;
            }
      }
    }
    return httphandler;
}


/////////////////////////////////////////////////////////////////////////////
// gebruik van Ajax

function handleHttpResponse_registreer()
{
  if(http.readyState == 4)
  {
  document.body.style.cursor = 'auto';
  document.getElementById('email').readOnly = true;
  document.getElementById('registreer').disabled = true;
  
    var response = eval('(' + http.responseText + ')');
    if (response.registreer.naam == 1)
      {
        document.getElementById('email').readOnly = false;
        document.getElementById('email').focus();
      }
    if (response.registreer.email == 1)
      {
        document.getElementById('registreer').disabled = false;
        document.getElementById('registreer').focus();
      }
    if (response.registreer.geregistreerd == 1)
      {
        window.location = "index.php?pagina=geregistreerd";
      }
  }
  else
  {
    document.body.style.cursor = 'wait';
  }
}

function valideer(verzend)
{
  http = createHTTPHandler();
  var naam = document.getElementById('naam').value;
  var email = document.getElementById('email').value;
  
  var passData = 'naam='+escape(naam)+'&email='+escape(email) +'&verzend='+escape(verzend);
  
  http.open("POST", "index.php?pagina=valideer", true);
  http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  http.onreadystatechange = handleHttpResponse_registreer;                                
  http.send( passData );
}
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.