Question

我正在使用laravel 5.2，我的问题是：
使用ajax提交表单时如何显示验证错误？

例如：
如果未使用ajax，如果未填写标题字段，则在提交时会有以下信息：
＆＃34;标题字段是必需的。＆＃34;
并且，当使用ajax时，如何显示上面的信息。

查看：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.1.1/css/tether.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form id="formArticle" class="form-horizontal" role="form">
        <fieldset class="row form-group">
            <label class="col-xs-2 control-label">Title:</label>
            <div class="col-xs-10">
                <input id="title" name="title" type="text" class="form-control"
                       value="{{ old('title') }}">
                <span class="help-block"><strong></strong></span>
            </div>
        </fieldset>

        <fieldset class="row form-group">
            <label class="col-xs-2 control-label">Content:</label>
            <div class="col-xs-10">
                <input id="content" name="content" type="text" class="form-control"
                       value="{{ old('content') }}">
                <span class="help-block"><strong></strong></span>
            </div>
        </fieldset>

        <fieldset class="row form-group">
            <label class="col-xs-2 control-label" for="photo">Photo：</label>
            <div class="col-xs-10">
                <input id="photo" name="photo" type="file" class="form-control-file">
                <span class="help-block"><strong></strong></span>
            </div>
        </fieldset>
        <fieldset class="form-group">
            <div class="col-xs-12">
                <button id="submit" type="submit" class="btn btn-primary">Submit</button>
            </div>
        </fieldset>
    </form>
    <div class="alert alert-success" role="alert" hidden>
        upload successfully
    </div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>

</body>
</html>

使用Javascript：

<script>
    $(function () {
        var articleData = new FormData($('#formArticle')[0]);


        $(document).on('submit', '#formArticle', function (e) {
            e.preventDefault();

            $('input+span>strong').text('');
            $('input').parent().parent().removeClass('has-error');

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                        type: "POST",
                        url: "{{ url('article/') }}",
                        dataType: 'json',
                        processData: false,
                        contentType: false,
                        cache: false,
                        data: articleData
                    })
                    .done(function (data) {
                        $(".alert-success").prop("hidden", false);
                    })
                    .fail(function (data) {
                        $.each(data.responseJSON, function (key, value) {
                            var input = '#formArticle input[name=' + key + ']';
                            $(input + '+span>strong').text(value);
                            $(input).parent().parent().addClass('has-error');
                        });
                    });
        });
    });
</script>

控制器：

    public function store(Requests\StoreArticleRequest $request)
    {
        $article = new Article;
        $article -> user_id = \Auth::id();

        $article->title = $request->title;
        $article->content = $request->content;

        $photo = $request->photo;
        $destinationPath = 'uploads/';
        $extension = $photo->getClientOriginalExtension();
        $photoName = \Auth::user()->id . '_' . time() . '.' . $extension;
        $photo->move($destinationPath, $photoName);
        $article -> photo = '/'.$destinationPath.$photoName;

        $article->save();
    }

StoreArticleRequest：

public function rules()
    {
        return [
            'title'=>'required',
            'content'=>'required',
            'photo'=>'required'
         ];
    }

如果输入完全填写，表格数据可以成功保存到数据库中但是，当他们没有被完全填满，或者什么都没有填补时， json消息显示在Chrome调试器的预览和响应标记中，如下所示：

{
"title":["The title field is required."],
"content":["The content field is required."],
...
}

但是，消息无法以html显示此时，显示".alert-success" 我不知道代码中的问题在哪里。

我认为我对done（）和fail（）的理解是不对的 done（）和fail（）表示ajax请求已完成或失败，
但验证不成功或失败，
无论laravel验证成功还是失败，
ajax请求完成，
所以，
即使我没有完成输入， div class =＆＃34; alert alert-success＆＃34;总是出现。

Answer 1

您收到成功消息，因为收到“好”回复时会触发done()。当您收到错误消息时，服务器的实际响应仍为200。

您需要检查data中的done()以确保它不是错误。如果是title === "The title field is required."，您需要运行目前位于fail()的代码。

.done(function (data) {
  if(data.title[0] == 'The title field is required.' ) {
    alert('Title is required');
  }
  else {
    $(".alert-success").prop("hidden", false);
  }
})
.fail(function (data) {
  alert('The server failed somewhere');
});

显然，你想要做除警报以外的其他事情，并且你想要检查这两个字段，但这就是它的要点。

Laravel 5.2：如何在使用ajax提交表单时显示验证错误？

1 个答案: