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

Laravel 5.2:How to show validation errors when submitting form with ajax?

本文关键字：何显示 显示 错误 验证 使用 ajax 表单 提交 Laravel      更新时间：2023-09-26

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

例如：
不使用ajax时，如果没有填写标题字段，提交时，有一条信息：
"标题字段为必填项。">
以及，当使用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();
    }

商店文章请求：

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="警报警报-成功"总是出现。

您收到成功消息是因为收到"良好"响应时会触发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');
});

显然，您希望执行警报以外的其他操作，并且要检查这两个字段，但这就是它的要点。

相关文章：