如何使用 ajax Laravel 5.3 进行验证答案

【问题标题】：how to make validation using ajax Laravel 5.3如何使用 ajax Laravel 5.3 进行验证
【发布时间】：2017-03-18 06:27:39
【问题描述】：

我正在使用 Laravel 5。在我的 OrganisationsController 我有一个方法 addItem

 public function addItem(Request $request)
    {
        $rules = array(
            'nom' => 'required',
        );
        // for Validator
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
            return Response::json(array('errors' => $validator->getMessageBag()->toArray()));

        else {
            $section = new Section();
            $section->nom = $request->nom;
            $section->save();
            return response()->json($section);
        }
    }

Ajax 代码

    $("#add").click(function() {
            $.ajax({
                type: 'post',
                url: '/addItem',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'nom': $('input[name=nom]').val()
                },
                success: function(data) {
                    if ((data.errors)) {
                        $('.error').removeClass('hidden');
                        $('.error').text(data.errors.title);
                        $('.error').text(data.errors.description);
                    } else {
                        $('.error').remove()
                        $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom +  "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); }
                   }
                });

            $('#noom').val('');
        });

html代码

<div class="form-group row add">
    <div class="col-md-5">
        <input type="text" class="form-control " id="noom" name="nom"
               placeholder="New section here" required>
		<p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-2">
        <button class="btn btn-warning" type="submit" id="add">
            <span class="glyphicon glyphicon-plus"></span> Add new Section
        </button>
    </div>

</div>

我不知道为什么我的验证不起作用。请为此提出一个示例。我正在使用 laravel 5。我搜索了很多网站。但我无法解决这个问题。

【问题讨论】：

标签： php jquery laravel-5.3 ajaxform

【解决方案1】：

如果您的验证失败，它将返回状态代码（错误代码）422。

在您的$.ajax 中，您仅使用success，如果您的验证失败，则不会调用它。

您需要在 ajax 选项中添加错误方法。使用上面的代码，你会得到类似的东西：

success: function (data) {
    $('.error').remove()
    $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); 
},
error: function (data) {
    if (data.errors) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.description);
    }
}

希望这会有所帮助！

【讨论】：

还是同样的问题 :(
我找到了解决方案 !!!解决方案是删除条件 if(data.errors) thanks for help

【解决方案2】：

解决方案是删除条件 if(data.errors)

【讨论】：

【解决方案3】：

对于 jquery 3 及以上版本，使用此代码

$.ajax({
      type: 'post',
      url: '/addItem',
      data: {
           '_token': $('input[name=_token]').val(),
           'nom': $('input[name=nom]').val()
}).done(function(data){
      //if success, do this
      console.log(data);
      alert('success');
}).fail(function(jqXHR){
      if (jqXHR.status == 422) {
             var errors = (jqXHR.responseJSON);
             console.log(errors);
      }
});

【讨论】：