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

Posted 2023-03-15

【中文标题】如何使用ajax在刀片中显示验证错误？

【英文标题】：How to display the validation error in blade using ajax?

【发布时间】：2021-09-03 01:02:18

【问题描述】：

如何使用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]);
            )
        
    );
);

谢谢

【问题讨论】：

您应该检查 HTTP 状态代码。如果是 422，则错误的每个键代表元素名称。然后按照逻辑。您可以创建一个带有 id 的 span 元素，例如 <span id="name-error">The validation error message for name</span> 和 insertAfter 元素。

嗨，你显示的输出是data ?

【参考方案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');
        );
    ,
    ...
);

【讨论】：

嗨，抱歉回复晚了。我已经尝试过了，我得到了这个错误：Uncaught TypeError: Cannot read property 'errors' of undefined.

也许尝试调试 err 变量 console.log(err); 中的内容会有所帮助