如何使用 ajax Laravel 5.3 进行验证

Question

我正在使用 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 code

    $("#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 code

<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。我搜索了很多网站。但是我找不到解决方案。

Answer 1

如果您的验证失败，它将 return 状态代码（错误代码）为 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);
    }
}

希望对您有所帮助！

Answer 2

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

Answer 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);
      }
});

如何使用 ajax Laravel 5.3 进行验证

how to make validation using ajax Laravel 5.3

php

jquery

ajaxform

laravel-5.3