带有验证和存储 Jquery 的 Laravel 表单添加 html 元素

Posted 2023-05-09

【中文标题】带有验证和存储 Jquery 的 Laravel 表单添加 html 元素

【英文标题】：Laravel Form with Validation and store Jquery add html elements

【发布时间】：2020-08-27 07:55:58

【问题描述】：

我使用 Laravel，并且我有一个带有 laravel 验证和必填字段的表单（所以当我遇到错误时，它总是重新加载所有页面，并且我使用旧刀片标签保留值）。 一切都很好，但我做了一个按钮来添加一些带有 jquery 的文本框

$(".add-more").click(function() 
      var html = $(".copy").html();
      $(".after-add-more").before(html);
    );

    $("body").on("click",".remove",function() 
      $(this).parents(".control-group").remove();
    );

当 Laravel 在提交后的每条无效消息处重新加载所有页面时，我如何保存旧值和创建的 n-html 元素？ 谢谢

【问题讨论】：

你的问题不清楚可以尝试添加一些代码让我们理解。

最佳做法是不重新加载页面并保持 html 不变。无需重新加载即可管理验证。

也在 Laravel 框架中？我知道 Laravel 总是重新加载，因为这个存在旧值检索器.....你确定吗？

好吧，我建议使用localStorage将数据保存到localstorage，在需要时检索，但记得在每个重新加载页面上清空localstorage。

【参考方案1】：

很简单，你不用重新加载整个页面，例如用laravel的@include包含一个元素，表格的内容在另一个刀片文件中，但它被包含了

<table class="table tablesorter ">
    <thead class=" text-primary">
        <tr>
            <th scope="col">ID</th>
            <th scope="col">TIPO</th>
            <th scope="col">fecha</th>
            <th scope="col">Monto</th>
            <th scope="col">Acciones</th>
        </tr>
    </thead>
    <tbody id="table">
        @include('component-table')
    </tbody>
</table>

组件表.blade.php

    <tr>
        <td>hi</td>
        <td>
            test
        </td>
        <td></td>
        <td></td>
        <td class="text-right">

        </td>
    </tr>

现在，您可以创建一个返回此视图的控制器，并在您调用该控制器时仅重新加载表，并将 html 替换为 jquery 的 html() 函数

//on controller 
    public function table()
    
        return view('component-table.blade.php');
    
//js
    async function reloadTable()
        await $.ajax(
            type: "GET",
            url: " route('component-table') ",
            data: '',
            success: function(response)
                            $('#table').html(response)
                        
        );
    

【讨论】：

如果我只重新加载例如表格部分，laravel 验证不适用于没有重新加载的部分，我认为我需要使用旧值 lavaravel 功能吗？谢谢

无论什么需要验证，您都可以将其分离到另一个组件中，我通常按组件、表单、表格、模态等将所有内容分开，以便可以在不影响其他内容的情况下操作所有内容，如果您需要表单经过验证并且不希望重新加载页面的其余部分，只需将该表单放在另一个刀片模板中并包含它，将输入或错误闪现到会话中

我的意思是必须修复子刀片并重新加载父亲

【参考方案2】：

至少使用刀片我得到了这个，我不知道是否正确。 恢复我所拥有的。一个包含多个字段和一个按钮的表单，每次您按下此按钮时都会添加其他 2 个 html 字段（一个是组合框，名称='tipo'，从数据库中的表（称为 moyens）中获取值）

@if( old('tipo') )
   @foreach (old('tipo') as $key => $value) 
    <!--<div> $key . ' => ' . $value </div>-->
    <div class="col-sm-5">
    <select class="form-control" name="tipo[]">
        @foreach($moyens as $moyen)
            <option value="$moyen->code" @if($moyen->code == '$value') 'selected' @endif> $moyen->name </option>
        @endforeach
    </select>
    </div>
    <div class="col-sm-4">
        <div class="input-group-prepend">
            <span class="input-group-text">&#8364</span>
            <input type="number" min="0" step="0.01" data-number-to-fixed="2" data-number-stepfactor="100" class="form-control" name="importo[]" placeholder="importo" value="old('polizza')">
        </div>
        </div>
        <div class="col-sm-3">
        <button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Cancella</button>
    </div>
    @endforeach
@endif

一切正常，但我无法在组合框/es 中检索旧的选定值

这是部分

 <option value="$moyen->code" @if($moyen->code == '$value') 'selected' @endif> $moyen->name </option>

这个方法可以正确吗？ 谢谢