使用 laravel 在选项卡中显示验证错误

Question

在我看来，我有 3 个选项卡，其中显示了不同类型的数据。在我的第三个选项卡中，我发布了一些我使用 laravel 验证的数据。我的问题是验证错误显示在我的第一个选项卡中。我应该怎么做才能在第三个选项卡中显示错误。

我的控制器

$validator = Validator::make($request->all(), Rules::Event($request));
        if ($validator->fails()) {
           return back()->withErrors($validator)->withInput();
        }

查看页面

<ul class="nav nav-tabs">
          <li class="active"><a data-toggle="tab" href="#home">Upcoming Events</a></li>
          <li><a data-toggle="tab" href="#menu1">Popular Events</a></li>
          <li ><a data-toggle="tab" href="#menu2">Post an Event and sell ticket</a></li>
        </ul>

<div class="tab-content">

 <div id="home" class="tab-pane fade in active">
................
</div>

 <div id="menu1" class="tab-pane fade">
..............
</div>

 <div id="menu2" class="tab-pane fade">

<div class="event_tab_holder"> 


                @if (count($errors) > 0)
                    <div class="col-lg-12">
                        <div class="alert alert-danger">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                            <h5><strong>{{ t('Oops ! An error has occurred. Please correct the red fields in the form') }}</strong></h5>
                            <ul class="list list-check">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                @endif
          </div>
    </div>
</div>

如何实现？请帮帮我，等待回复......

Answer 1

你可以试试这个：

将error 类添加到li

<li class='error'>{{ $error }}</li>

然后使用这个脚本：

   if ($(".tab-content").find('.error').text()) {
    $.each($(".tab-content").find('.error'), function (index, value) {
        if ($(this).text()) {
            $(".tab-content").children('.tab-pane').removeClass('active');
            $(this).closest('.tab-pane').addClass('active');
            $(".nav-tabs").children('li').removeClass('active');
            var id = $(this).closest('.tab-pane').attr('id');
            $.each($(".nav-tabs").children('li'), function (i, a) {
                if (('#' + id) == $(this).children('a').attr('href'))
                    $(this).addClass('active');
            });
            return false;
        }
    });
}