使用 AJAX 显示 Laravel 验证错误

Question

我在Laravel中有一个使用 Ajax 提交的Form 。一切正常，但问题是我无法在 HTML 中呈现验证错误。
（我想在我的 HTML 中显示<ul><li>中的错误）

这是我的 Ajax 请求：

 $(document).ready(function () {
        $("#submit").click(function (xhr) {
            xhr.preventDefault(),
                $.ajax({
                    type: "POST",
                    contentType: "charset=utf-8",
                    dataType: 'json',
                    url: "{{route('messages.store')}}",
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content")
                    },
                    data: {
                        name: $("#name").val(),
                        email: $("#email").val(),
                        phone: $("#company").val(),
                        subject: $("#subject").val(),
                        message: $("#message").val()
                    },
                    success: function () {
                        alert('True');
                    },
                    error: function (xhr) {
                        console.log((xhr.responseJSON.errors));
                    }
                }, "json")
        })
    });

控制台日志：

谢谢你的帮助。

Answer 1

像这样尝试

error: function (xhr) {
   $('#validation-errors').html('');
   $.each(xhr.responseJSON.errors, function(key,value) {
     $('#validation-errors').append('<div class="alert alert-danger">'+value+'</div');
 }); 
},

这里的 validation-errors是 div id。 您可以使用自己的 div id。

Answer 2

AJAX 请求的验证返回 JSON 响应与您在问题中提到的不同。 您可以查看lara 文档，您在控制台中看到的响应是一个 JSON 数组，而不是 HTML 错误。

所以你可以做的是，你可以捕获 AJAX 中的任何错误，并自行检查电子邮件、消息等是否有任何错误。 基于此，您可以在页面上显示错误。

Answer 3

<div id="error_email"></div>

将其放在您希望显示错误的位置

然后在你的错误函数中

$('#error_email').html('<p>'+ xhr.responseJSON.errors.email[0] + '</p>')

Answer 4

您需要从Ajax选项中删除contentType: "charset=utf-8"以使其正常工作。

Answer 5

试试这个希望它能帮助您解决相关字段后的渲染错误。

$("#booking_form").submit(function(e){
            e.preventDefault();
            let form_data = $("#booking_form").serialize()
            $(document).find("span.text-danger").remove();
            $.ajax({
                url : "your-url",
                type : "POST",
                data : form_data,
                success : function(response){

                },
                error:function (response){
                    $.each(response.responseJSON.errors,function(field_name,error){
                        $(document).find('[name='+field_name+']').after('<span class="text-strong textdanger">' +error+ '</span>')
                    })
                }
            })
        })