如何使用ajax在刀片中显示验证错误？

Question

如何使用ajax在刀片中显示错误信息？我的代码运行良好，验证消息出现在检查元素中，但不在我的刀片表单中。我正在使用 Laravel 8。

控制器

    public function store(StudentRequest $request)
    {
        $request->validate();
        $input = $request->all();

        Student::updateOrCreate(['id' => $request->id], $input);
        return response()->json(['success' => 'Added new student']);
    }

我正在使用表单请求来处理验证：

请求

    public function rules()
    {
        return [
            'name'  => 'required',
            'email' => 'required|email',
        ];
    }

这是我的刀。我使用printErrorMsg()在表单上方显示所有验证错误，但它不起作用并且什么也没显示。

刀片

    <form id="studentForm" name="studentForm" class="form-horizontal" enctype="multipart/form-data" method="POST">
        {{ csrf_field() }}

        <div class="alert alert-danger print-error-msg" style="display:none">
            <ul></ul>
        </div>

        <input type="hidden" name="id" id="id">
        <div class="form-group">
            <label for="name" class="col-sm-2 control-label">Name</label>
            <div class="col-sm-12">
                <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value="">
            </div>
        </div>

        <div class="form-group">
            <label for="email" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-12">
                <input type="text" class="form-control" id="email" name="email" placeholder="Enter Email" value="">
            </div>
        </div>

        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes</button>
        </div>

    </form>
    @endsection

    @push('scripts')
    <script type="text/javascript">
    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('#createNewStudent').click(function() {
            $('#saveBtn').val("create-student");
            $('#id').val('');
            $('#studentForm').trigger("reset");
            $('#modelHeading').html("Create New Student");
            $('#ajaxModel').modal('show');
        });

        $('#studentForm').submit(function(e) {
            e.preventDefault();
            let formData = new FormData(this);

            $.ajax({
                data: formData,
                url: "{{ route('students.store') }}",
                type: "POST",
                dataType: 'json',
                contentType: false,
                cache: false,
                processData: false,
                success: function(data) {
                    if($.isEmptyObject(data.error)){
                        alert(data.success);
                        $('#studentForm').trigger("reset");
                        $('#ajaxModel').modal('hide');
                        table.draw();
                    }else{
                        printErrorMsg(data.error);
                    }
                },
            });
        });

        function printErrorMsg (msg) {
            $(".print-error-msg").find("ul").html('');
            $(".print-error-msg").css('display','block');
            $.each( msg, function( key, value ) {
                $(".print-error-msg").find("ul").append('<li>'+value+'</li>');
            });
        }
    });
    </script>

    @endpush

已编辑：

我通过 linktoahref 的回答和 Sachin Kumar 的评论解决了这个问题。我删除了刀片中的printErrorMsg() 函数，并将其更改为每个带有id 的字段的spans 元素，并使用responseText 返回js 字符串。所以，这是编辑后的代码：

刀片：

<div class="form-group">
 <label for="email" class="col-sm-2 control-label">Email</label>
 <div class="col-sm-12">
  <input type="text" class="form-control" id="email" name="email"/>
  <small id="email_error" class="form-text text-danger"></small>
 </div>
</div>

$('#studentForm').submit(function(e) {
    e.preventDefault();
    $('#name_error').text('');
    $('#email_error').text('');
    let formData = new FormData(this);
    $.ajax({
        data: formData,
        url: "{{ route('students.store') }}",
        type: "POST",
        dataType: 'json',
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            if (data.status == true) {
                alert('Success!');
                $('#studentForm').trigger("reset");
                $('#ajaxModel').modal('hide');
                table.draw();
            }
        },
        error: function(reject) {
            var response = $.parseJSON(reject.responseText);
            $.each(response.errors, function(key, val) {
                $("#" + key + "_error").text(val[0]);
            })
        }
    });
});

谢谢

Answer 1

扩展 Sachin Kumar 的评论，从 Laravel 返回的验证错误将有一个 http 响应代码 422 并且将在 AJAX 的 error 回调中可用。

因此，您可以在 html 中添加额外的 span 以适应错误并在最初隐藏它并在验证错误时显示它。

<div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-12">
        <input type="text" 
            class="form-control"
            id="name"
            name="name"
            placeholder="Enter Name" value="">
        <span class="error text-danger d-none"></span>
    </div>
</div>

<div class="form-group">
    <label for="email" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-12">
        <input type="text" 
            class="form-control"
            id="email"
            name="email"
            placeholder="Enter Email" value="">
        <span class="error text-danger d-none"></span>
    </div>
</div>

并在错误回调中处理验证错误如下：

$.ajax({
    ...
    error: function (err) {
        $.each(err.responseJSON.errors, function (key, value) {
            $("#" + key).next().html(value[0]);
            $("#" + key).next().removeClass('d-none');
        });
    },
    ...
});