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

Question

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

注意到：我也在使用引导框架。

<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>

控制器

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请求。

data: $('#create').serialize(),

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

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

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