Question

我在Form中有Laravel用Ajax提交。每件事情都运行良好但问题是我无法在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

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

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

然后在你的错误函数中

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

Answer 3

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

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

Answer 4

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

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>')
                    })
                }
            })
        })

使用AJAX显示Laravel验证错误

5 个答案: