使用 JavaScript 和 Blade 管理过时的值：Laravel 10 动态输入表单

在 Laravel 10 中使用 JavaScript 处理旧输入值

解决方案 1：结合 Blade 和 JavaScript 来保留旧表单值

// 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);
}

Laravel Blade 和 JavaScript 同步

解决方案 2：使用 Blade、JavaScript 和验证处理来模块化方法

// 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);
    });
}

用于验证 Laravel 表单中旧值的单元测试

解决方案 3：添加单元测试以确保旧值的表单行为

// 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
}

关于 Laravel 动态表单的常见问题

1. 验证失败后如何在 Laravel 中重新填充表单数据？
2. 您可以使用 old() Blade 模板中的函数可在验证失败后检索先前输入的值。例如， value="{{ old('field_name') }}" 可用于重新填充文本输入。
3. 如何在动态生成的表单字段中使用旧值？
4. 要在 JavaScript 生成的字段中使用旧值，请使用 @json() 指令，然后将其动态插入到表单中。例如，使用 @json(old('reward')) 将旧值传递给 JavaScript，然后将它们附加到表单字段。
5. 为什么我的 JavaScript 无法识别 Blade 语法？
6. JavaScript 无法直接解释 Blade 语法，因为它运行在客户端，而 Blade 渲染在服务器上。要将 Blade 变量传递给 JavaScript，您应该使用 @json() 将 PHP 变量转换为 JavaScript 可以读取的格式。
7. 如何处理动态表单中的验证错误？
8. 除了重新填充表单数据之外，还可以使用 Laravel 的 @error() 指令在输入字段旁边显示验证消息。这有助于指导用户在验证失败后修复任何错误。
9. 在 Laravel 中管理动态表单输入的最佳方式是什么？
10. 最好的方法是将 Blade 的模板功能与 JavaScript 相结合以生成动态字段。使用 insertAdjacentHTML() 在 JavaScript 中附加新的表单字段和 old() 在 Blade 中检索以前的值。

关于 Laravel 和动态表单处理的最终想法

在 Laravel 10 中处理动态表单需要 Blade 的 old() 帮助器和 JavaScript 的巧妙组合。这种组合可确保用户数据在验证失败后不会丢失，特别是在使用动态生成的字段时。

通过使用 JavaScript 附加表单字段和 Laravel 的内置方法（如 old() 和 @json()），您可以创建流畅、用户友好的体验。正确的验证和错误处理进一步增强了表单提交过程的可靠性。