Formulier tegenhouden met javascript

[Bitbored]

Ik ben voor school (en voor vrienden) bezig met een website waarop het mogelijk moet zijn om te registreren.
Na 3 jaar lang in ASP.NET websites te ontwikkelen, moet ik dit voor m'n opleiding nu in php doen.

Op zich geen probleem, op 1 groot nadeel na: geen custom validators.
Required field validators en dergelijke waren al snel vervangen door jquery, maar het controleren of een e-mail adres reeds geregistreerd is moet gebeuren met ajax.

De ajax code was dankzij w3c schools vrij snel in elkaar gezet, maar dan het grote probleem: de form tegenhouden als het e-mailadres wel degelijk bestaat...

Op internet heb ik gevonden dat dit moet aan de hand van onsubmit="return functie()" toe te voegen aan de form tag, en de functie true te laten returnen als het formulier mag uitgevoerd worden.

Dit is de relevante code:

JavaScript:

function emailValidate()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var email = document.getElementById("email").value;
    xmlhttp.open("POST","checkemail.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("email="+email);
    var ok = false;
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            if (xmlhttp.responseText==1)
            {
                document.getElementById("email").setAttribute("class", "error");
                document.getElementById("mailexists").innerHTML = "<?php echo REG_MAILEXISTS?>";
                //document.getElementById("btnsubmit").disabled=true;
                ok = false;   
            }
            else
            {
                ok = true;
                document.getElementById("mailexists").innerHTML = "";
                //document.getElementById("btnsubmit").disabled=false;

            }
        }
    }             
    return ok;
};

HTML:

<form method="post" action=".\register.php" id="frmRegister" class="userform" onsubmit="return emailValidate()">
            <fieldset>
                    <legend>Register</legend>
                        <label for="email" ><?php echo REG_TXTEMAIL ?></label>
                        <input name="email" type="text" size="50" maxlength="100" id="email" onblur="emailValidate();"/>
                        <label for="email" id="mailexists" class="mailexists"></label>
                        <div class="clear"></div>

                        <label for="password"><?php echo REG_TXTPASSWORD ?></label>
                        <input name="password" type="password" size="50" maxlength="100" id="password"/>


                        <label for="password2"><?php echo REG_TXTRETYPEPASSWORD ?></label>
                        <input name="password2" type="password" size="50" maxlength="100" id="password2"/>


                        <label for="name"><?php echo REG_TXTNAME ?></label>
                        <input name="name" type="text" size="50" maxlength="100" id="name"/>


                        <label for="city"><?php echo REG_TXTCITY ?></label>
                        <input name="city" type="text" size="50" maxlength="100" id="city"/>


                        <label for="country"><?php echo REG_TXTCOUNTRY ?></label>
                        <select name="country" id="country">
                        <?php echo GenerateDdlCountries() ?>
                        </select>
                        <input name="submit" type="submit" value="<?php echo REG_BTNSUBMIT ?>" class="button" id="btnsubmit"/>
                    </fieldset>
                    <?php
                        function GenerateDdlCountries()
                        {
                           return(" <option value='' selected='selected'>".GLB_SELECTCOUNTRY."</option>
                                    <option value='Belgium'>".GLB_BELGIUM."</option>
                                    ...
                                    <option value='Zimbabwe'>Zimbabwe</option>");
                       }
                    ?>
 </form>

Echter, dit blijkt niet te werken, de form wordt ook niet uitgevoerd als de functie wel degelijk true returnt.
Ziet iemand een fout in mijn code?

Hier kan je de code (niet) zien werken.

Als er verder nog iemand te veel tijd en voldoende kennis heeft, van de foutmeldingen van de w3c-validator snap ik ook niets (behalve die in verband met de iframes).

[BasieP]

lijkt me stukje debuggen, en dat kun je zelf leren

start met firebug en firefox, en stap door je code.
Verder kan je natuurlijk alles uitzetten (commentarieren) en dan weer 1 voor 1 aanzetten. Kijken waar het fout gaat.


ow en een httprequest komt niet direct met resultaat. Dat is asyncroom. Dus ajax in je validate van je form gaat niet werken (niet op deze manier iig)

Je zal dat je post ook op die manier moeten doen (dmv ajax, wanneer de 'validate' gereturned is)

[Voor 36% gewijzigd door BasieP op 16-05-2011 23:10]

[disjfa]

Je geeft aan validatie te doen met jquery, en dan ga je het wiel opnieuw uitvinden voor ajax. Wat is er mis met $.ajax()

[Bitbored]

BasieP schreef op maandag 16 mei 2011 @ 23:09:
lijkt me stukje debuggen, en dat kun je zelf leren

start met firebug en firefox, en stap door je code.
Verder kan je natuurlijk alles uitzetten (commentarieren) en dan weer 1 voor 1 aanzetten. Kijken waar het fout gaat

Je wilt niet weten hoe lang ik daar al mee bezig ben.
Iets op tweakers zetten is mijn voorlaatste stap in het debuggen van code, een laatste wanhoopsdaad...

Technisch gezien zou de code moeten werken, en ook als ik via de console de status van de variable ok bekijk zou het moeten kloppen.
Het grote probleem is: het werkt niet.

[BasieP]

je ajax functie retourneerd altijd false. Als je gewoon een alert van je resultaat in je form onsubmit had gezet had je dat al geweten.
ik vind het niet gek dat het niet werkt...

dus even zoiets:

code:

<form action="" method="" onsubmit="alert(emailValidate()); return false;">
..
</form>

[Voor 62% gewijzigd door BasieP op 16-05-2011 23:17]

[Bitbored]

disjfa schreef op maandag 16 mei 2011 @ 23:09:
Je geeft aan validatie te doen met jquery, en dan ga je het wiel opnieuw uitvinden voor ajax. Wat is er mis met $.ajax()

Als ik de code zelf schrijf pas ik leerstof toe uit de les=> ajax.
Als ik dit doe aan de hand van jquery maak ik volgens mij minder kans op extra punten...

BasieP schreef op maandag 16 mei 2011 @ 23:14:
je ajax functie retourneerd altijd false. Als je gewoon een alert van je resultaat in je form onsubmit had gezet had je dat al geweten.
ik vind het niet gek dat het niet werkt...

dus even zoiets:

code:

<form action="" method="" onsubmit="alert(emailValidate()); return false;">
..
</form>

Bedankt voor die tip, maar het ligt niet aan ajax, want anders zou de label met de error gevuld blijven, en dat is niet het geval...

Wat doet javascript dan voor vieze dingen met mijn variabele "ok"?

[Voor 44% gewijzigd door BtM909 op 17-05-2011 14:10]

[BasieP]

Bitbored schreef op maandag 16 mei 2011 @ 23:20:
[...]


Bedankt voor die tip, maar het ligt niet aan ajax, want anders zou de label met de error gevuld blijven, en dat is niet het geval...

Wat doet javascript dan voor vieze dingen met mijn variabele "ok"?

helemaal niks..

ik zal het nog duidelijker voor je maken in (jouw) pseudo code:

code:

function emailValidate() 
{ 
    defineer httprequestobject;
    zet data in httprequestobject;
    verstuur httprequestobject;
    zet resultaat op false;
    defineer wat je httprequestobject moet doen als loaden klaar is.              
    return resultaat 
}

imho doe je 2 dingen fout.

1 is volgorde, die tweede is dat je niet doorhebt hoe een asynchroom request werkt.

[killercow]

Wat ik me afvraag is hoe goed je basiskennis van Html / Javascript en stateless werken met een webserver / webbrowser is.

Wat het lijkt er op dat door alle trucjes die ASP voor je doet er bar weinig kennis is over wat er nou echt gebeurt en hoe je dat dus zelf bouwt.

[Bitbored]

Erm... 1 lesje tijdens webontwerp met inhoudt overgenomen uit w3c schools + wat opzoekwerk op google en w3c schools.

Maar ik begin ondertussen zo stilaan door te hebben dat het waaarschijnlijk komt omdat de functie meer wordt doorlopen dan ik dacht.

om te bewijzen dat ajax wel degelijk werkt: seppestas[AT]gmail.com is geregistreerd.

[disjfa]

Bitbored schreef op maandag 16 mei 2011 @ 23:37:
om te bewijzen dat ajax wel degelijk werkt: seppestas[AT]gmail.com is geregistreerd.

Dat komt toch gewoon door je post, en niet door de ajax emailcheck functie

Vergeet verder ook niet gewoon na je post je inhoud na te kijken. Mensen kunnen javascript uit hebben staan.

[Bitbored]

killercow schreef op maandag 16 mei 2011 @ 23:29:
Wat ik me afvraag is hoe goed je basiskennis van Html / Javascript en stateless werken met een webserver / webbrowser is.

Wat het lijkt er op dat door alle trucjes die ASP voor je doet er bar weinig kennis is over wat er nou echt gebeurt en hoe je dat dus zelf bouwt.

Ja, ik ben verwend geweest met ASP, en m'n kennis betreffende javascript is miniemaal (en ik wil het al helemaal niet hebben over m'n geklungel met CSS, geef mij maar tables om eerlijk te zijn).

Maar he, ik schrijf het nu toch maar allemaal zelf, en ik leer er door bij, in plaats van te blijven de simpele weg te nemen en ajax te gebruiken.

Echter nu zit ik vast, dus vraag ik om hulp van mensen die er hopelijk meer van weten dan mij (en m'n leerkracht).

disjfa schreef op maandag 16 mei 2011 @ 23:42:
[...]

Dat komt toch gewoon door je post, en niet door de ajax emailcheck functie

Vergeet verder ook niet gewoon na je post je inhoud na te kijken. Mensen kunnen javascript uit hebben staan.

Probeer maar eens...

voor de ongelovige Thomassen, die hardnekkig volhouden dat het aan ajax ligt (of tog de verbinging server <-> javascript) hieronder de checkmail functie:

PHP:

//checkmail.php

    include_once './user.php';
    include_once './globalfunctions.php';
    $email=globalfunctions::cleanText($_POST['email']);
    echo  (user::emailexists($email));

//Gedeelte user class
static function emailexists($email)
    {
        include_once './db.php';
        db::connect();
        $result = mysql_query("SELECT user_id FROM tblusers WHERE user_email='".$email."';") or die(mysql_error());
        return (mysql_num_rows($result) >= 1);
    }

[Voor 37% gewijzigd door BtM909 op 17-05-2011 14:10]

[Manuel]

Bitbored schreef op maandag 16 mei 2011 @ 23:43:
[...]


Probeer maar eens...

Gooi die hele AJAX-bumps code van je weg a.u.b. en laat jQuery dit afhandelen. Klein voorbeeld:

code:

$("#frmRegister").submit(function(e) {
    e.preventDefault(); //Gebruikers die wel JS hebben krijgen een fancy-pancy foutmelding als het incorrect is.

    $.post("checkemail.php", { email: $("#email").val() }, function(response) {
        if(response === "1") {
            $("#email").attr("class", "error");
            $("#mailexists").text("Het ingegeven e-mail adres is reeds geregistreerd");
            // etc. etc.
        }
    });
});

Als je dit hebt kan je die lelijke onsubmit ook weghalen. Dit staat trouwens allemaal uitgelegd op http://api.jquery.com en ik heb het gevoel dat je niet goed genoeg debugged.

[BasieP]

Ik weet niet of we nou het probleem van de TS willen oplossen of een workaround voor hem bedenken.

Hij zegt dit te moeten doen voor school, ik neem aan dat ie er iets van wil leren.
Het zeggen dat ie alles overboord moet gooien en een kant-en-klaar oplossing moet kiezen lijkt me niet het meest leerzame.

Natuurlijk heeft jquery zijn voordelen, maar het geeft direct ook weer de nadelen aan. nameljik, dat dan de knowhow van echt js niet aanwezig is.

Dus nogmaals @ ts:

doe eens alerts plaatsen.
dit is meest basale manier van debuggen.

Ik zou er 1 in je onready functie zetten die 'onready' uitpoept, en 1 in je onsubmit van je form, die de return state van je validate functie laat zien.

Kijk vooral eens naar de volgorde van de beide berichten, en het resultaat van de validate.

[Bosmonster]

BasieP schreef op dinsdag 17 mei 2011 @ 07:56:
Ik weet niet of we nou het probleem van de TS willen oplossen of een workaround voor hem bedenken.

Hij zegt dit te moeten doen voor school, ik neem aan dat ie er iets van wil leren.
Het zeggen dat ie alles overboord moet gooien en een kant-en-klaar oplossing moet kiezen lijkt me niet het meest leerzame.

Natuurlijk heeft jquery zijn voordelen, maar het geeft direct ook weer de nadelen aan. nameljik, dat dan de knowhow van echt js niet aanwezig is.

De knowhow van "echt js" (of eigenlijk gewoon de basis browserfunctionaliteit) is ook redelijk zinloos vandaag de dag. Het is leuk om de basis te leren, maar in de praktijk zul je toch bijna altijd met frameworks werken. De rest van je JS kennis zul je ook leren als je een framework als jQuery gebruikt (het is niet dat dat ineens een andere taal is ofzo..).

Met ASP.NET ga je ook niet eerst het complete wiel opnieuw uitvinden en alles van de grond af zelf opnieuw bouwen met C# oid, maar gebruik je het ASP.NET framework

Het is denk ik belangrijker dat ie doorheeft dat het onzin is om scriptjes van internet bij elkaar te plukken. Als je jQuery gebruikt voor validatie, gebruik het dan ook voor je ajax-functionaliteit, ipv daar weer een andere knip-en-plak-snippet voor te gebruiken.

Overigens: Ik zou alle validatie door de server laten verrichten. Voor clientside validatie kun je dan altijd ajax gebruiken (middels de jQuery form submit). Zo kun je je validator standaardiseren en maak je geen functionaliteit dubbel.

[Voor 30% gewijzigd door Bosmonster op 17-05-2011 08:09]

[BasieP]

Bosmonster schreef op dinsdag 17 mei 2011 @ 08:01:
[...]


De knowhow van "echt js" (of eigenlijk gewoon de basis browserfunctionaliteit) is ook redelijk zinloos vandaag de dag. Het is leuk om de basis te leren, maar in de praktijk zul je toch bijna altijd met frameworks werken. De rest van je JS kennis zul je ook leren als je een framework als jQuery gebruikt (het is niet dat dat ineens een andere taal is ofzo..).

Met ASP.NET ga je ook niet eerst het complete wiel opnieuw uitvinden en alles van de grond af zelf opnieuw bouwen met C# oid, maar gebruik je het ASP.NET framework

Het is denk ik belangrijker dat ie doorheeft dat het onzin is om scriptjes van internet bij elkaar te plukken. Als je jQuery gebruikt voor validatie, gebruik het dan ook voor je ajax-functionaliteit, ipv daar weer een andere knip-en-plak-snippet voor te gebruiken.

Overigens: Ik zou alle validatie door de server laten verrichten. Voor clientside validatie kun je dan altijd ajax gebruiken (middels de jQuery form submit). Zo kun je je validator standaardiseren en maak je geen functionaliteit dubbel.

Eens maar zelf debuggen is iets dat je met alle talen zult moeten doen. Frameworks of niet.

[Bitbored]

Ik gebruik liever console.log dan alerts, maar het komt op het zelfde neer: het ligt niet aan het gebrek aan pogingen tot debuggen.

Het vreemde is, de dingen die ik zie tijdens het debuggen konden niet kloppen.

Maar nu ben ik achter het probleem: hij voert de functie nog een keer uit als ik op de knop druk, maar geraakt niet door het xmlhttp request ready gedeelte om een of andere reden.

Wat er gebeurt:

Ik vul een niet bestaande mail in:
Invullen;
Onblur: voert checkfucntie (eerst ok=false) en ajax correct uit en geeft juiste resultaat terug (dus ok=true);
Rest van de form invullen;
Druk op knop;
Voert checkfunctie terug uit => ok terug op false;
PROBLEEM: voert om een of andere reden ajax niet uit=> ok blijft false.

Is het mogelijk om in JS globale variabelen (in meer functies bruikbare variablen) aan te maken en te gebruiken?

En ja, hier aan de hand van mooie dubug mooi weergegeven wat er gebeurt:

Niet bestaand adres:
registerpage.php:169 onblur
registerpage.php:64 start
registerpage.php:102 return functie:false <-waarom???
registerpage.php:84 ready
registerpage.php:97 zet ok = true
registerpage.php:165 druk op knop
registerpage.php:64 start
registerpage.php:102 return functie:false <-waarom???
registerpage.php:84 ready
registerpage.php:97 zet ok = true

Wel bestaand adres:
onblur
registerpage.php:64 start
registerpage.php:102 return functie:false <-waarom???
registerpage.php:84 ready
registerpage.php:87 zet ok= false
registerpage.php:165 druk op knop
registerpage.php:64 start
registerpage.php:102 return functie:false <-waarom???
registerpage.php:84 ready
registerpage.php:87 zet ok= false

Hij returnt dus eerst false, waarna hij de ajax code uitvoert.
Dit is niet de bedoeling, en zowel return als de console alert staan helamaal onderaan de functie.

[Voor 39% gewijzigd door Bitbored op 17-05-2011 08:33. Reden: uitbreiding]

[RM-rf]

code:

function emailValidate()
{
    var ok = false;
    xmlhttp.onreadystatechange = function()
    {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            if (xmlhttp.responseText==1)
            {
                ok = false;   
            }
            else
            {
                ok = true;
            }
        }
    }             
    return ok;
};

een stukje uitgesneden uit het relevante deel van je code....
het gaat om de variabele 'ok' die 'true' zou moeten worden, standaard is hij 'false'...


hét probleem waarhet volgens mij op haakt is het verschil tussen globale en lokale variabelen...
in javascript is een variabele lokaal als hij met 'var' binnen een functie aangemaakt wordt, hij bestaat dan enkel binnen die functie zélf.....


zodra je bv in een event buiten die functie hem aanspreekt, zoals bv in de 'onreadystatechange' spreek je niet meer lokale functie aan...
sowieso zul je iets moeten doen om het uitvoeren van de submit 'uit te stellen' totdat het ajaxrequest terugkomt, een javascript functie wacht normaal niet totdat bv de readystate van dat ajax-object veranderd is....


Overigens, mensen die enkel kunnen antwoorden hier dat iemand maarmoet debuggen, en dat zij daar geen zin in hebben vind ik erg onbeschoft, antwoord dan geheel niet.... mensen helpen moet altijd mogelijk zijn en deze TS heeft redelijk uitgebreid uitgelegd wàt hij gedaan heeften waarmee hij bezig is en lijkt best door te hebben wat hij doet, als zijn er altijd punten waariemand zich soms op 'blind' kan staren... juist dan is behulpzaam zijn des te nodiger...

[BasieP]

je request is asynchroom. Dwz dat hij niet wacht op antwoord.
Je verstuurd een aanvraag naar de server, en retourneerd dan je 'ok' variabele.

Later zet je je 'ok' variabele, namelijk wanneer je response terugkomt van de server. Dit kan best later zijn, maar misschien ook wel op tijd.
Wat ik eerder probeerde te zeggen, is dat

JavaScript:

request.onreadystatechange = function () {}

niets anders is dan het zetten van een variabele. De code die daar in die function staat wordt niet uitgevoerd totdat je reactie van de server terug is.

[Bitbored]

Ik heb mijn code werkend gekregen, zodra ik het wat opgeschoond heb plaats ik het hier.
Ik krijg wel nog een error:

POST http://localhost/cubabella/checkemail.php undefined (undefined)

Is dit erg, op te vangen of moet ik me hier niets van aantrekken?

Bedankt voor jullie inzicht!

[BasieP]

Bitbored schreef op dinsdag 17 mei 2011 @ 08:44:
Ik heb mijn code werkend gekregen, zodra ik het wat opgeschoond heb plaats ik het hier.
Ik krijg wel nog een error:

POST http://localhost/cubabella/checkemail.php undefined (undefined)

Is dit erg, op te vangen of moet ik me hier niets van aantrekken?

Bedankt voor jullie inzicht!

mooi
wat was het nou?

over die error:
In princiepe moeten alle errors gewoon weg kunnen, dus zou ik zeker nog voor zorgen. Waarschijnlijk is het een kleine moeite, en dat oogt ook beter (geen fouten in je browser)

[RM-rf]

Overigfens, wat checked die 'checkemail.php' eigenlijk?
volgens mij zal die an sich in die korte tijd, ook niet kunnen controleren of een email-adres 'werkt' (of mail geretourneerd wordt e.d.)...

dus ik zou vermoeen dat het gewoon een reguliere Expressie is die controleert of het format van dat adres klopt volgens een 'email-stramien'... laat dàt net zo goed in javascript kunnen, dus lijkt het me zelfs geheel overbodig een ajax/serverside oplossing toe te passsen..

Hooguit is het altijd belangrijk om naast clientside controle óók altijd _na_ het submitten je input serverside te controleren, maar dat is evenzeer nodig bij ajax-checks

[BasieP]

RM-rf schreef op dinsdag 17 mei 2011 @ 08:57:
Overigfens, wat checked die 'checkemail.php' eigenlijk?
volgens mij zal die an sich in die korte tijd, ook niet kunnen controleren of een email-adres 'werkt' (of mail geretourneerd wordt e.d.)...

dus ik zou vermoeen dat het gewoon een reguliere Expressie is die controleert of het format van dat adres klopt volgens een 'email-stramien'... laat dàt net zo goed in javascript kunnen, dus lijkt het me zelfs geheel overbodig een ajax/serverside oplossing toe te passsen..

Hooguit is het altijd belangrijk om naast clientside controle óók altijd _na_ het submitten je input serverside te controleren, maar dat is evenzeer nodig bij ajax-checks

nee hij checkt of het mail adres al in de DB staat. (zie TS)

[BasieP]

mmm
de edit knop is kapot!

[Voor 95% gewijzigd door BasieP op 17-05-2011 09:02]

[Bitbored]

De functie kijkt of de ingevulde e-mail reeds is geregistreerd in de database...

Hier mijn code, zorgt wel nog voor een error maar ik vermoed al dat ik weet waar die vandaan komt.
Het zou ook kunnen dat de knop nu soms niets doet als er direct op gedrukt wordt ipv dat de rest v/d form wordt ingevuld, maar dat gebeurt wss toch niet te vaak.

JavaScript:

var ok = false;
function emailValidate()
{
    console.log("start");
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    var email = document.getElementById("email").value;
    xmlhttp.open("POST","checkemail.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("email="+email);
    xmlhttp.onreadystatechange = function()
    { 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            console.log("ready");
            if (xmlhttp.responseText==1)
            {
                ok = false;
                document.getElementById("email").setAttribute("class", "error");
                document.getElementById("mailexists").innerHTML = "<?php echo REG_MAILEXISTS?>";
                console.log("zet ok= false");
            }
            else
            {
                ok = true;
                document.getElementById("mailexists").innerHTML = "";
                console.log("zet ok = true");     
            }
        }
    }
};
function status()
{
    return ok;
}

HTML:

<form method="post" action=".\register.php" id="frmRegister" class="userform" onsubmit="console.log('druk op knop');return status();">
<fieldset>
    <legend>Register</legend>
        <label for="email" ><?php echo REG_TXTEMAIL ?></label>
        <input name="email" type="text" size="50" maxlength="100" id="email" onblur="console.log('onblur');emailValidate();"/>
        <label for="email" id="mailexists" class="mailexists"></label>
        <div class="clear"></div>
...
        <input name="submit" type="submit" value="<?php echo REG_BTNSUBMIT ?>" class="button" id="btnsubmit"  onclick="emailValidate();"/>
    </fieldset>
    
</form>

[jw_moonshine]

Je zou dan nog kunnen controleren of alles is ingevuld, voordat de rest van de functie word uitgevoerd. Met een simpele if constructie zou dat moeten kunnen.

[BasieP]

um als ik het zo snel goed zie heb je nu nog een probleem

dwz, wanneer je nu een trage verbinding hebt werkt het nog niet.
Als je een email adres hebt ingevuld, en dan direct op submit klikt (dus niet eerst naast het veld) dan gaat wel eerst de onblur af, maar direct daarna je onsubmit van je form.

Wanneer je server response te lang duurt heb je hetzelfde probleem.

Ikzelf zou, als je helemaal zeker wilt zijn gewoon je formulier submitten in de ajax response van je validate functie.

dus dan wordt je stack zoiets:

onsubmit => validateForm => onreadystatechanged => (en dan hier je form submitten)

je validateform moet je dan altijd false laten retourneren.

[Voor 3% gewijzigd door BasieP op 17-05-2011 09:33]

[TJHeuvel]

De aanpak van BasieP is inderdaad hoe je het zou moeten doen.

Dit is omdat AJAX asynchroon is, dus de onreadystatechange functie wordt op een later moment aangeroepen, en je functie blijft gewoon doorgaan. Daarom is de ok variable niet geset bij het returnen.

Dus je applicatie verloopt dan zo:

OnSubmit
returnt altijd false!
OnReadyStateChange
Kijk of de response 1 is, dan roep je de submit van het formulier aan.

Maar wat heb je dan bereikt? In deze oplossing zorg je door AJAX te gebruiken eigenlijk alleen voor een extra call naar de server, en meer dus wachtijd. Waarom submit je hem niet altijd, en geef je gewoon de hele pagina inclusief foutmelding terug als het geen valide email is?

[crisp]

Dit is omdat AJAX asynchroon is

Dat hoeft natuurlijk niet

[BasieP]

CyCloneNL schreef op dinsdag 17 mei 2011 @ 09:36:
De aanpak van BasieP is inderdaad hoe je het zou moeten doen.

Dit is omdat AJAX asynchroon is, dus de onreadystatechange functie wordt op een later moment aangeroepen, en je functie blijft gewoon doorgaan. Daarom is de ok variable niet geset bij het returnen.

Dus je applicatie verloopt dan zo:

OnSubmit
returnt altijd false!
OnReadyStateChange
Kijk of de response 1 is, dan roep je de submit van het formulier aan.

Maar wat heb je dan bereikt? In deze oplossing zorg je door AJAX te gebruiken eigenlijk alleen voor een extra call naar de server, en meer dus wachtijd. Waarom submit je hem niet altijd, en geef je gewoon de hele pagina inclusief foutmelding terug als het geen valide email is?

of disable je de submit knop standaard, en enable je hem in je ontextchange event van je email input veld (= veel http calls)
of de onblur van je email input veld (=minder calls, maar kan je niet direct op 'submit' klikken)

[TJHeuvel]

crisp schreef op dinsdag 17 mei 2011 @ 09:43:
[...]

Dat hoeft natuurlijk niet

Hoe ironisch dat ook is inderdaad. De hele term AJAX zou imho ook verbannen moeten worden, die X slaat ook al nergens op

BasieP schreef op dinsdag 17 mei 2011 @ 09:44:
[...]

of disable je de submit knop standaard, en enable je hem in je ontextchange event van je email input veld (= veel http calls)
of de onblur van je email input veld (=minder calls, maar kan je niet direct op 'submit' klikken)

Wat ik gewoon wil zeggen is dat je nu 2 requests doet naar de server, terwijl dit gewoon onnodig is. Gewoon lekker submitten die handel, laat PHP het valideren en zonodig de foutmeldingen terugsturen.

[Voor 56% gewijzigd door TJHeuvel op 17-05-2011 09:46]

[BasieP]

crisp schreef op dinsdag 17 mei 2011 @ 09:43:
[...]

Dat hoeft natuurlijk niet

HTML:

<input ... onsubmit="return validate()">

JavaScript:

function validate() {
   return $.ajax({
      url: "servervalidate.php",
      global: false,
      type: "POST",
      data: ({email: $(#email).value}),
      async:false,
   }).responseText == "1";
}

[Bosmonster]

crisp schreef op dinsdag 17 mei 2011 @ 09:43:
[...]

Dat hoeft natuurlijk niet

Maar wordt het dan niet SJAX?

(nu wordt de term ajax toch voor alles misbruikt wat los en vast zit, maar goed )

Ik weet niet eens in welke categorie een 1 of 0 terugsturen valt

[Voor 30% gewijzigd door Bosmonster op 17-05-2011 10:35]

[BasieP]

Bosmonster schreef op dinsdag 17 mei 2011 @ 10:33:
[...]


Maar wordt het dan niet SJAX?

meestal is het idd AJAJ (json)
maar in dit geval is het SJAP (synchroom javascript plaintext)

[TJHeuvel]

Bosmonster schreef op dinsdag 17 mei 2011 @ 10:33:
[...]


Maar wordt het dan niet SJAX?

(nu wordt de term ajax toch voor alles misbruikt wat los en vast zit, maar goed )

Ik weet niet eens in welke categorie een 1 of 0 terugsturen valt

Binair

OAJAD : Optionally Asynchronous Javascript and Data

Uiteraard is AJAX niet de enige benaming, XMLHTTP heet het officieel. Niet dat dat een veel beter omschrijving is...

[Voor 13% gewijzigd door TJHeuvel op 17-05-2011 10:51]

[Bosmonster]

Dan noem ik het idd liever XHR, maar dan ben je weer vaak aan het uitleggen wat dat is met als antwoord "je weet wel, ajax"

Maar goed, we geraken off topic. Waar ging dit topic ook al weer over? Ow ja, clientside validatie.

Om het maar even samen te vatten:

Je wilt je validatie standaardiseren, dus dezelfde checks gebruiken serverside als clientside. Via progressive enhancement kun je clientside validatie toevoegen middels XHR. Je grootste uitdaging zit in het standaardiseren van de backend. Je post feitelijk het gehele formulier altijd (zij het gewoon via submit, zij het via XHR), handelt de validatie af, zet het resultaat om naar een standaard formaat (bvb object) en afhankelijk van het type submit return je de JSON van dit object of verwerk je het direct in je nieuwe te serveren template.

Zo heb je je logica bij elkaar op 1 plek, en is de verwerking simpelweg afhankelijk van je view.

[Voor 5% gewijzigd door Bosmonster op 17-05-2011 11:23]

[Cartman!]

Bosmonster schreef op dinsdag 17 mei 2011 @ 11:20:
Dan noem ik het idd liever XHR, maar dan ben je weer vaak aan het uitleggen wat dat is met als antwoord "je weet wel, ajax"

Klinkt bekend maar als je stug volhoudt gaat iedereen je vanzelf begrijpen, i got your back

[BasieP]

Bosmonster schreef op dinsdag 17 mei 2011 @ 11:20:
Je wilt je validatie standaardiseren, dus dezelfde checks gebruiken serverside als clientside. Via progressive enhancement kun je clientside validatie toevoegen middels XHR. Je grootste uitdaging zit in het standaardiseren van de backend. Je post feitelijk het gehele formulier altijd (zij het gewoon via submit, zij het via XHR), handelt de validatie af, zet het resultaat om naar een standaard formaat (bvb object) en afhankelijk van het type submit return je de JSON van dit object of verwerk je het direct in je nieuwe te serveren template.

Zo heb je je logica bij elkaar op 1 plek, en is de verwerking simpelweg afhankelijk van je view.