javascript - 如何使用ajax/jquery处理laravel5.1中的验证错误

Question

我现在使用 laravel5.1 和 jquery ajax 创建一个验证。一切正常。但是，我想要的是显示每个 <inputs> 的错误就像在没有 ajax 的情况下使用验证一样。请参阅下面的我的代码以及示例输出的图片。我也尝试过 @if Blade (laravel)，但不工作。

注意:我也在使用 Bootstrap 框架。

<div class="row">
  <div class="col-md-6">
    <div id="result">
        <ul></ul>
        </div>
        <form action="" method="post" id="create">
            <div class="form-group">
                <label for="name" class="control-label">Name</label>
                <input type="text" name="name" id="name" class="form-control">
            </div>

            <div class="form-group">
                <label for="description" class="control-label">Description</label>
                <textarea name="description" id="description" cols="30" rows="10" class="form-control"></textarea>
            </div>

            <div class="form-group">
                <label for="type" class="control-label">Type</label>
                <input type="text" name="type" id="type" class="form-control">
            </div>

            <div class="form-group">
                <label for="price" class="control-label">Price</label>
                <input type="text" name="price" id="price" class="form-control">
            </div>

            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-success">
            </div>

            {{ csrf_field() }}
        </form>
    </div>
</div>


<script>
    $(document).ready(function(){
        var url = '{{ route('ajax-push') }}';
        var token = '{{ csrf_token() }}';
        $('#create').on('submit', function(){
            $.ajax({
                type: 'POST',
                url: url,
                data: { _token: token },
                dataType: 'json',
                success: function(data){
                    console.log(data);
                },
                error: function(data){
                    var errors = data.responseJSON;
                    $('#result').removeClass('alert').removeClass('alert-danger');
                    $('#result > ul').empty();
                    $.each(errors, function(i, item){
                        $('#result').addClass('alert').addClass('alert-danger');
                        $('#result > ul').append('<li>' + item + '</li>');
                    });
                }
            });

            return false;
        });
    });
</script>

Controller

public function postAjaxCreate(Request $request){
        $validator = $this->validate($request, [
            'name' => 'required|max:255',
            'description' => 'required|min:2',
            'type' => 'required|max:255',
            'price' => 'required|numeric'
        ]);

        if($validator->fails()){
            return response()->json($validator->messages(), 200)->with($validator->messages());
        }
    }

Answer 1

您需要将 from 数据传递给 ajax 请求

数据:$('#create').serialize(),

很可能响应没有 responseJSON 属性，并且您发送数据两次，请删除 php 函数中的 with 函数

使用类似于以下 js 的内容将错误添加到页面:

$.each(data, function(i, item){
  $('#'+i).addClass('alert alert-danger'); 
  ('#'+i).after('<p>' + item + '</p>');
});