Question

如何使用ajax在blade中显示错误信息？我的代码运行良好，验证消息出现在检查元素中，但不在我的刀片表单中。我使用的是 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 中添加额外的跨度以容纳错误并在最初隐藏它并在验证错误时显示它。

<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');
        });
    },
    ...
});

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

1 个答案: