[ HTML / JavaScript ] Textbox-input "onderwater" checken...

[Atmoz]

Beste Tweakers,

Om de input van een bepaalde textbox op een (HTML) formulier te controleren had ik het volgende idee:

In het "lostfocus" event van de textbox roep ik een PHP script aan wat als parameter de invoer van de textbox heeft. Dit PHP script controleerd vervolgens de invoer, en stuurt (echo'd) dan "TRUE" of "FALSE" terug. Dit controleren duurt echter een paar seconden! (en daar gaat het nu juist fout!!). Ik wil namelijk in mijn formulier (JavaScript) niet "wachten" op de output van de PHP. Er moet mijns inziens een mechanisme te bedenken zijn wat "onderwater" aangeroepen wordt (dus bij het lostfocus-event), en dat je dan ondertussen toch nog de andere velden op het formulier kunt invullen, en zodra de output van de PHP bekend is (TRUE of FALSE) komt er wel of geen Alert (msgbox) op de webpagina. (alleen bij FALSE wil ik een melding geven dat de input verkeerd is).

Ik heb even snel een PHP scripjte gemaakt:

<?php

sleep(3);

//Hier komt dadelijk de check... (die +/- ook 3 sec. duurt)

echo "FALSE";

?>

En zodra dit wordt aangeroepen door het JavaScript, dan hangt de pagina die het aanroept 3 sec. vast waardoor je in dit tijd geen andere velden kunt invullen.

Wie weet er een slimme oplossing hiervoor? Misschien iets met een thread ofzo, maar kun je dan ook weer een Alert genereren op de pagina dit de thread gestart heeft?

Ik kijk uit naar de reacties Thanks alvast!

[TheNephilim]

Hoe doe je dat? Submit je bij een onchange het hele formulier?

Netter is om met Ajax bij onblur of onchange even de value naar de server te sturen, asynchroon dus. Je bezoeker kan dan verder met invullen.

[Atmoz]

TheNephilim schreef op dinsdag 01 oktober 2013 @ 16:17:
Hoe doe je dat? Submit je bij een onchange het hele formulier?

Nee, ik start bij onblur (of lostfocus, ik weet het even niet meer) een functie wat een HttpRequest doet naar dat PHP script. En afhankelijk van de output moet er wel/geen Alert-box komen.

Netter is om met Ajax bij onblur of onchange even de value naar de server te sturen, asynchroon dus. Je bezoeker kan dan verder met invullen.

Oke, dat klinkt inderdaad al logischer/beter Maar hoe "vang" ik dan weer de reponse van de server op? En kun je daar dan weer een Alert hangen? (sorry, bijna nog nooit met Ajax gewerkt)

[418O2]

niet het netste, wel het makkelijkste antwoord; met jQuery

pseudocode

code:

(function() {
$("input.bla").blur(function() {
$.get("bla.php", function(response) { if(response.bla) { alert('joe') });
})
})

[Atmoz]

thanks Catch22, dat ziet er goed uit!

Met wat aanpassingen heb ik nu dit:

$(document).ready(function(){
$("#EmailAdresCP").blur(function(){
var value = $(this).val();
if ( value.length > 0 && value != "Default text" ){
//alert("de");
//$.get("sleep.php", function(response) { alert(response) });


$.get("sleep.php", function(response) {

var str1 = response;
var str2 = "FALSE";
if(str1.indexOf(str2) != -1){alert("E-mailadres is niet correct!");}
});


//if (response == "FALSE"){alert(response);}
};
});
});

Er treed wel nog één probleem op: als ik in de "EmailAdresCP" textbox ga, en ik type wat, en ga er dan uit en vervolgens weer in, dan blijft om de 3 sec. die popup komen?! En pas als ik weer eruit ga (door bijvoorbeeld weer een andere textbox te selecteren) dan komt er nog 2x een popup, en dan stopt het pas.

Vreemd gedrag vind ik dat Hoe kan ik dit oplossen?

[spleethoven]

Waarom doe je eigenlijk die

PHP:

sleep(3);

?

[Atmoz]

spleethoven schreef op woensdag 02 oktober 2013 @ 09:38:
Waarom doe je eigenlijk die

PHP:

sleep(3);

?

Dat is om die (externe) emailcheck na te bootsen, die duurt minimaal 3 sec.

Maar dat moet ik nog maken, dus vandaar even deze code.

[Foxl]

atmoz schreef op woensdag 02 oktober 2013 @ 09:35:
thanks Catch22, dat ziet er goed uit!

Met wat aanpassingen heb ik nu dit:


[...]


Er treed wel nog één probleem op: als ik in de "EmailAdresCP" textbox ga, en ik type wat, en ga er dan uit en vervolgens weer in, dan blijft om de 3 sec. die popup komen?! En pas als ik weer eruit ga (door bijvoorbeeld weer een andere textbox te selecteren) dan komt er nog 2x een popup, en dan stopt het pas.

Vreemd gedrag vind ik dat Hoe kan ik dit oplossen?

Je kunt onfocus de eventueel nog uitstaande call naar de server cancellen, a-la dit voorbeeld;

code:

var req = $.get('ajax/test.html', function(data) {
            $('.result').html(data);
            alert('Load was performed.');
          });

//Abort request
req.abort()

[Bosmonster]

Vergeet niet dat abort niet echt een oplossing is. De request wordt, als die verzonden is, niet werkelijk geannuleerd, maar de response wordt gewoon genegeerd. Dit betekent dat de server nog steeds de requests mag afhandelen, wat bij requests van een paar seconden wel eens het einde van een snelle webserver kan betekenen.

[ruurdkrekt]

Waarom check je de invoer niet met javascript?
En dan wanneer het form gesubmit wordt check je het nog een keer met PHP voor het geval de user aan het rommelen is geweest?

[Jogai]

Met ^^

Er zijn een hoop libraries die je hier mee kunnen helpen: http://plugins.jquery.com/tag/validation/

Ik schat dat je aan de serverkant nog een keer wilt checken of het emailadres nog een keer voorkomt, of op een blacklist etc. Dit is vrij normaal om pas bij het submitten van het form te doen. Ook dit kan je via javascript doen waarmee de validatie nog steeds seamless lijkt.

[P.O. Box]

atmoz schreef op dinsdag 01 oktober 2013 @ 17:10:
[...]


Nee, ik start bij onblur (of lostfocus, ik weet het even niet meer) een functie wat een HttpRequest doet naar dat PHP script. En afhankelijk van de output moet er wel/geen Alert-box komen.

als je je httprequest asynchroon had gedaan was je er geweest... de term die jij zoekt is namelijk: asynchroon...

[Gomez12]

ruurdkrekt schreef op woensdag 02 oktober 2013 @ 14:29:
Waarom check je de invoer niet met javascript?

3 seconden check, ik gok niet echt dat dat een regex oid is. Dat is volgens mij een paar db-calls en wellicht webservice aanroepen. Dat wordt al heel snel heel complex om exact met JS na te bootsen.

Wat je uiteraard wel kan doen is simpelweg in javascript een simpele voorchecker te maken (zie de validation scripts etc) en pas als het emailadres daar doorheen komt dan roep je de ajax-call aan.
Dan zit je in ieder geval niet 3 seconden te wachten op iemand die een apestaartje in een emailadres vergeet.

[TheNephilim]

Gomez12 schreef op woensdag 02 oktober 2013 @ 15:11:
[...]

3 seconden check, ik gok niet echt dat dat een regex oid is. Dat is volgens mij een paar db-calls en wellicht webservice aanroepen. Dat wordt al heel snel heel complex om exact met JS na te bootsen.

Wat je uiteraard wel kan doen is simpelweg in javascript een simpele voorchecker te maken (zie de validation scripts etc) en pas als het emailadres daar doorheen komt dan roep je de ajax-call aan.
Dan zit je in ieder geval niet 3 seconden te wachten op iemand die een apestaartje in een emailadres vergeet.

Ik gok dat hij de MX records van het e-mailadres gaat checken. Dat kan inderdaad wel even duren!