Elavult értékek kezelése JavaScript és Blade segítségével: Laravel 10 Dynamic Input Forms

Régi űrlapadatok kezelése JavaScript segítségével a Laravel 10-ben

Amikor dinamikus űrlapokat fejlesztenek a Laravel 10-ben, az egyik gyakori kihívás a felhasználói bevitel megtartása az érvényesítési hiba után. A Blade-sablonokban ez általában a következővel kezelhető régi() helper funkció, amely visszaállítja a korábban megadott értékeket. Ennek a függvénynek a dinamikus használata azonban az űrlapmezők JavaScript-szel történő hozzáfűzésekor speciális kezelést igényel.

A projektem során ezzel a problémával szembesültem, miközben olyan rendszert fejlesztettem ki, amely lehetővé teszi a felhasználók számára, hogy dinamikusan adják hozzá és távolítsák el a jutalmakat. Sikertelen érvényesítés után az űrlapnak meg kell őriznie a régi jutalomadatokat, és ennek megfelelően meg kell jelenítenie azokat. Laravelnél régi() függvény jól működik a Blade-en belül, de a JavaScript hozzáfűzési logikával való kombinálása bonyolult lehet.

A probléma lényege abban rejlik, hogy a Blade-sablonok és a JavaScript eltérően értelmezi az adatokat. Amikor új elemeket fűzök hozzá JavaScripttel, dinamikusan kell beillesztenem a régi értékeket, de ennek szintaxisa nem mindig egyértelmű. Ennek elmulasztása az oldal újratöltése után fontos adatok elvesztését okozza.

Ez az útmutató végigvezeti Önt a használat gyakorlati megközelítésén régi() függvény a JavaScript által generált mezőkben. Megvizsgáljuk, hogyan lehet dinamikusan hozzáfűzni új bemeneteket és biztosítani a régi értékek helyes megőrzését egy Laravel 10 projektben. Merüljünk el!

Dinamikus űrlapkezelés régi értékekkel a Laravel 10-ben

A rendelkezésre álló szkriptekben a fő kihívás az új jutalom űrlapmezők dinamikus hozzáfűzése, amelyek képesek megtartani régi értékek a Laravelben történt érvényesítési hiba után. Általában Laravelé régi() A helper lekéri a korábban beírt értékeket, miután az űrlap elküldése sikertelen volt, de ez gyakran nehézkes, ha JavaScript használatával hozzáfűzi az elemeket. A megoldás a Blade kombinálásában rejlik @json() direktívát JavaScripttel, lehetővé téve a régi bemeneti adatok közvetlenül a dinamikusan generált mezőkbe való átadását.

A funkció addMoreItem() kulcsa ennek a megközelítésnek. JavaScript használatával új beviteli mezőket fűz hozzá minden jutalomhoz. A mezők hozzáfűzése előtt ellenőrizzük, hogy vannak-e régi értékek @json(régi('jutalom')). Ez a PHP oldalról származó régi bemeneti értékeket JavaScript objektummá alakítja, amelyet azután ismételhetünk Object.entries(). Ez a módszer lehetővé teszi az egyes jutalombejegyzések áthurkolását, és a hozzájuk tartozó értékek beillesztését a dinamikusan létrehozott űrlapelemekbe.

A szkript is használja a insertAdjacentHTML() metódus, amely a HTML-tartalmat a meglévő űrlaphoz képest egy adott pozícióba szúrja be. Ez döntő fontosságú új jutalomelemek hozzáfűzéséhez az oldal frissítése nélkül. Például egy új jutalom hozzáadásakor a szkript létrehoz egy új űrlapmezőt a megfelelő beviteli értékekkel, és hozzáfűzi az űrlaptárolóhoz. A régi() funkció biztosítja, hogy ha az űrlapellenőrzés sikertelen, a korábban bevitt adatok megjelenjenek a felhasználó számára.

Végül az egységtesztelés kritikus fontosságú ezen parancsfájlok viselkedésének ellenőrzéséhez. Ebben az esetben assertSessionHasOldInput() és assertSessionHasErrors() PHPUnit tesztekben használják annak biztosítására, hogy a Laravel megfelelően tárolja és visszakeresse a régi bemeneti adatokat. Ezek a tesztek igazolják, hogy a jutalom Az adatok megőrződnek a munkamenetben a sikertelen érvényesítés után, így biztosítva, hogy a dinamikus űrlapmezők megtartsák korábbi bemeneti értékeiket a következő űrlap újratöltéskor. A JavaScript és a Blade ezen kombinációja zökkenőmentes felhasználói élményt biztosít, amikor összetett, dinamikus űrlapokkal dolgozik a Laravelben.

// JavaScript function to dynamically append form fields
function addMoreItem() {
    let rewardCount = document.querySelectorAll('.reward-item').length + 1;
    let rewardData = @json(old('reward'));  // Get old values from Laravel
    let rewardItem = rewardData ? rewardData[rewardCount] : {};  // Default to empty object
    let rewardHtml = `
        <div id="reward-${rewardCount}" class="reward-item">`
            <input type="text" name="reward[${rewardCount}][reward_name]"
                value="{{ old('reward.${rewardCount}.reward_name', rewardItem.reward_name || '') }}" />`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// JavaScript function that handles form generation and appends old values if available
function appendRewardItem(key, value) {
    let rewardHtml = `
        <div id="reward-${key}" class="card">`
            <input type="text" name="reward[${key}][reward_name]" class="form-control"
                value="{{ old('reward.' + key + '.reward_name', value.reward_name || '') }}">`
        </div>`;
    document.getElementById('reward_details').insertAdjacentHTML('beforeend', rewardHtml);
}

// Loop through existing rewards and append them
let rewardDetails = @json(old('reward'));
if (rewardDetails) {
    Object.entries(rewardDetails).forEach(([key, value]) => {
        appendRewardItem(key, value);
    });
}

// PHPUnit test for validating old input values
public function testOldRewardValuesPersist() {
    // Simulate form validation failure
    $response = $this->post('/submit-form', [
        'reward' => [
            '1' => [
                'reward_name' => 'Test Reward 1'
            ]
        ]
    ]);
    $response->assertSessionHasErrors();
    $response->assertSessionHasOldInput('reward');  // Check old input
}

A dinamikus űrlapkezelés optimalizálása a Laravelben Blade és JavaScript segítségével

A Laravelben az űrlapbevitel dinamikus kezelése, különösen a JavaScript használatával, gondos figyelmet igényel a Blade és a JavaScript interakciójára. A gyakran figyelmen kívül hagyott kulcsfontosságú szempont az űrlapadatok karbantartása az érvényesítési hibák után. A régi() segítő funkció, a Laravel egyszerű módot biztosít a beviteli mezők újratelepítésére, de ennek a funkciónak a dinamikusan hozzáadott elemekbe történő beépítése átgondoltabb megközelítést igényel. Ez különösen igaz tömbök vagy gyűjtemények (például jutalmak) esetén, ahol minden elemnek meg kell őriznie az adatait.

Erre a kihívásra egy hatékony megoldás a Laravel-féle kombináció @json() direktíva JavaScripttel. A @json() direktíva lehetővé teszi a szerveroldali adatok olyan formátumba való konvertálását, amelyet a JavaScript képes megérteni, ami döntő fontosságú a régi értékek visszaküldéséhez a frontend számára. Ha ezeket az értékeket újonnan hozzáfűzött űrlapmezőkbe rendeli hozzá, akkor biztosíthatja, hogy a felhasználók ne veszítsék el az előrehaladást, ha ellenőrzési hiba történik. Ez a technika kihasználja a Blade sablonmegjelenítési képességét, miközben lehetővé teszi a JavaScript-alapú űrlapkezelés rugalmasságát is.

A régi értékek egyszerű visszaállításán túl fontos figyelembe venni a hibakezelést és a bemenet érvényesítését. Ráadásul régi(), Laravel biztosítja @hiba() az érvényesítési üzenetek megjelenítéséhez adott mezők mellett, így a felhasználók könnyebben megérthetik, mi hibázott. Mindkét parancs integrálása zökkenőmentes élményt biztosít, amikor az űrlapok ellenőrzése meghiúsul, és a felhasználóknak javítaniuk kell a bemeneteiket. A Blade funkcióit a JavaScript rugalmasságával kombinálva dinamikus, de stabil felhasználói élményt tarthat fenn Laravel alkalmazásaiban.