Avatar billede AnyFellow Seniormester
16. september 2021 - 11:38 Der er 4 kommentarer og
1 løsning

Formvalidering med jquery og ajax- problemstilling ved asynkron

Jeg er vant til at programmere i PHP og har derfor svært ved at forstå, hvordan jeg skal lave eksempelvis en form-validering med flere ajax-kald, når dette kører asynkront.

I PHP ville jeg typiske lave noget lignende dette ved validering af en form:
Check for xxxx
Check for yyyy
Lav opslag i DB i tabel 1 på baggrund af zzzz -> Check at værdi findes.
Lav opslag i DB i tabel 2 på baggrund af qqqq -> Check at værdi findes.
Hvis alt ovenstående er som det skal være -> Gem indhold.

Jeg forsøger nu at flytte denne validering ud til klienten, inden formen submittes til serveren for at blive gemt, men kan ikke gennemskue/forstå hvordan det laves korrekt.

Laver jeg en funktion til at validere min form, vil den asynkrone afvikling gøre, at min form ikke valideres fuldt ud, inden jeg når til sidste kontrol i min funktion (er alt som det skal være -> submit).

Jeg har googlet en del og har fået en forståelse af, at jeg skal bruge callbacks, men jeg kan ikke gennemskue hvordan.

Hvis jeg har en form, hvor der skal foretages flere ajax-kald, for at kunne validere alt indhold fuldt ud, hvordan gøres det i praksis?
Avatar billede Rune1983 Ekspert
17. september 2021 - 07:50 #1
Prøv dette eksempel. Måske du kan bygge videre og lave din validering ud fra det.
<div style="width: 100%;">
    <input type="button" value="Hent data fra server og vis dem her." onclick="jSonHentDataFraServer('Kundenr12345678','','idDivVisDataHer');" />
    <div style="width: 100%;" id="idDivVisDataHer"></div>
</div>
<script>
    function jSonHentDataFraServer(Variabel01,Variabel02,idVisHer){

        if( document.getElementById(idVisHer) ){
            // Loading billede indtil data er hentet. Rart hvis noget tager længere tid for serveren at behandle. Ellers går det ret hurtigt.
            document.getElementById(idVisHer).innerHTML = '<img style="height: 50px;" src="images/loading.gif" />';
        }

        var obj, dbParam, xmlhttp, myObj, x, txt = "";
        obj = {
            "Variabel01": Variabel01 ,
            "Variabel02": Variabel02
        };
        dbParam = JSON.stringify(obj);

        if ( window.XMLHttpRequest ) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        xmlhttp.onreadystatechange = function() {
            if ( this.readyState === 4 && this.status === 200 ) {
                if( document.getElementById(idVisHer) ){
                    document.getElementById(idVisHer).innerHTML = this.responseText;;
                }
            }
        };

        xmlhttp.open("POST", "jSonHentDataFraServer.php", true);

        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("x=" + dbParam);
    }
</script>

<?php
//////////////////////////////////////////
// Fil: jSonHentDataFraServer.php
session_start(); // Start session hvis det anvendes. Du kan fjerne den hvis ikke du køre med login session
if($_SESSION['BrugerIDSomErLoggetInd'] != ""){ // Kontrol om bruger er logget ind. Du kan fjerne den hvis ikke du køre med login session
    //////////////////////////////////////////
    header("Content-Type: application/json; charset=UTF-8");
    $obj = json_decode(filter_input(INPUT_POST, 'x'), false);
    //////////////////////////////////////////
    $Variabel01 = $obj->Variabel01;
    $Variabel02 = $obj->Variabel02;
    //////////////////////////////////////////
    // Lav din validering her
    $ResultatValidering = 1;
    // Output resultat i fx.
    ?>
    <h1>jSonHentDataFraServer.php kørt igennem - <?php print $Variabel01; ?></h1>
    <input type="hidden" value="<?php print $ResultatValidering; ?>" />
    <?php
    //////////////////////////////////////////
}
//////////////////////////////////////////
?>
Avatar billede AnyFellow Seniormester
17. september 2021 - 08:18 #2
Det er nok mig der ikke helt forstår eksemplet, men jeg læser eksemplet således, at alt sendes til php, der foretager den endelige validering, dvs. synkron i stedet for asynkron.

Idéen var netop at bruge jquery til at forhåndsvalidere så meget som muligt.

Jeg vil forsøge at blive lidt mere konkret, med et tænkt eksempel, der rammer min problemstilling.

Felt1 -> En eller anden oplysning
Felt2 -> En oplysning der skal kontrolleres i tabelX
Felt3 -> En eller anden oplysning
Felt4 -> En oplysning, der skal kontrolleres i tabelY
Felt5 -> En eller anden oplysning

Hvis jeg skulle have valideringen i php (pseudeo):
Step 1: Check at felt 1 ikke er blank -> Hvis blank, sæt $save_in_db = no
Step 2: Check at felt 2 findes i tabelX -> Hvis ikke, sæt $save_in_db = no
Step 3: Check at felt 3 ikke er blank -> Hvis blank, sæt $save_in_db = no
Step 4: Check at felt 4 findes i tabelY -> Hvis ikke, sæt $save_in_db = no
Step 5: Check at felt 5 ikke er blank -> Hvis blank, sæt $save_in_db = no
Step 6: Hvis $save_in_db != no -> Gem i DB

Samme logik i jquery vil ofte resultere i at kontrollen step 2 og 4 ikke er færdige, inden step 6 nåes.

Jeg kan godt gennemskue, at en løsning kunne være at samle step 2 og 4 i samme ajax-kørsel og så slutte med denne, hvor step 6 så ville være en del af dette step, men det er bare ikke altid det giver særlig meget mening at bundle alle ajax-kald i et stort kald, så derfor var mit spørgsmål, hvordan man ellers kan håndetere problemstillingen?
Avatar billede Rune1983 Ekspert
17. september 2021 - 08:31 #3
I stedet for en knap kan du bare køre funktionen på det input felt som du anvender.
Udbygning med combobox nedenfor

<div style="width: 100%;">
    <input type="button" value="Hent data fra server og vis dem her." onclick="jSonHentDataFraServer('Kundenr12345678','','idDivVisDataHer');" /><br />
    <select id="idComboboxKontrolFelt1" onchange="jSonHentDataFraServer(document.getElementById('idComboboxKontrolFelt1').options[document.getElementById('idComboboxKontrolFelt1').selectedIndex].value,'','idDivVisDataHer');">
        <option value="Kontrol felt 1 - Blank">Kontrol felt 1 - Blank</option>
        <option value="Kontrol felt 1 - 1920 * 1080">1920 * 1080</option>
        <option value="Kontrol felt 1 - 1640 * 1080">1640 * 1080</option>
        <option value="Kontrol felt 1 - 1200 * 1080">1200 * 1080</option>
        <option value="Kontrol felt 1 - 800 * 600">800 * 600</option>
    </select>
    <div style="width: 100%;" id="idDivVisDataHer"></div>
</div>
Avatar billede AnyFellow Seniormester
17. september 2021 - 09:15 #4
Så du tænker på at lave valideringen af hvert enkelt felt efterhånden som brugeren udfylder disse, i stedet for at lave en samlet validering når der trykket submit?

Og at det fx ikke er muligt at trykke submit, før alle felter er valideret?
Avatar billede Rune1983 Ekspert
17. september 2021 - 10:40 #5
Det er jo så op til dig hvornår valideringen skal ske.
Min tanke var lidt at validere løbende og at submit knappen først er synlig når alt er i orden.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester