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

【问题标题】：Laravel 5.2:How to show validation errors when submitting form with ajax?Laravel 5.2：使用 ajax 提交表单时如何显示验证错误？
【发布时间】：2016-05-20 05:36:51
【问题描述】：

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

例如：
不使用ajax时，如果没有填写title字段，提交时有信息：
“标题字段是必需的。”
并且，当使用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 调试器的 Preview 和 Response 标签中，如下所示：

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

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

我觉得我对done()和fail()的理解是不对的。
done() 和 fail() 表示 ajax 请求完成或失败，
但不是验证成功或失败，
无论 laravel 验证成功与否，
ajax 请求完成，
所以，
即使我没有完成输入，
div class="alert alert-success" 总是出现。

【问题讨论】：

标签： javascript php jquery ajax laravel

【解决方案1】：

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

您需要检查done() 中的data 以确保它不是错误。如果是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');
});

显然，除了警报之外，您还想做一些事情，并且您想检查这两个字段，但这就是要点。

【讨论】：