Jquery Laravel-通过从收到的响应中获取值，在表单中显示验证错误

我正在使用laravel 5.8，我正在使用ajax提交表单，并使用laravel控制器验证表单。如果验证失败，我会得到验证错误消息，现在我想在表单中显示这些错误消息

我寻找各种解决方案和方法来访问收到的json响应，但我没有这样做

用户控制器中的我的验证代码

$this->validate（$request[
“名称”=>“必需|字符串”，
“电子邮件”=>“必需”|电子邮件|唯一：用户”，
'密码'=>'必需|字符串|最小值：6'
]);

我发送了使用ajax存储数据的请求

因此，如果任何验证失败，我会在chrome的network developer选项卡中得到如下响应：-

{"message":"The given data was invalid.","errors":{"email":["The email has already been taken."],"password":["The password field is required."]}}

所以我想做的是访问这些错误消息并将它们显示在我的表单下面。通知用户有关错误的信息。然而，我没有这样做

我在ajax错误中尝试了这一点：-

error: function(data){
   var errors = JSON.parse(data);
   $('.errors').append("<p>"+ data.errors[error] +"</p> ");
}

错误：函数（数据）{
var errors=JSON.parse（数据）；
$（'.errors'）。追加（“”+数据.errors[error]+”
”）；
}

请帮我弄清楚。

---

谢谢

这个ajax示例可以帮助您了解如何获取错误数据。对于数据显示格式，我认为您可以做到

  $.ajax({
    url: url,
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function(data) {
    }
  }).fail(function(xhr) {
       let data = xhr.responseJSON;
       if (data.errors) {
          // error happen
          $("#target-div").text(data.message);
          let errorInfo = "";
          for(let inputName in data.errors) {
            errorInfo += inputName +":"+ data.errors[inputName].message.join(", ") + "<br>";
          }
          $("#target-error-info").text(errorInfo);
       }
   });

$.ajax({
url:url，
键入：“POST”，
数据：formData，
数据类型：“json”，
成功：功能（数据）{
}
}).失败（功能（xhr）{
设data=xhr.responseJSON；
if（data.errors）{
//出错
$（“#目标div”）.text（data.message）；
让errorInfo=“”；
for（让inputName进入data.errors）{
errorInfo+=inputName+“：“+数据。错误[inputName]。消息。加入（“，”+”
”；
}
$（“#目标错误信息”）.text（错误信息）；
}
});

---

如果responseJSON未设置或为null，则可以尝试使用let data=JSON.parse（xhr.responseText）

Laravel验证错误返回422状态代码，您可以检查：

 $.ajax({
    ...
    success: function(data, statusCode) {
       // its validation error code
       if (statusCode == 422 && 'errors' in data) { 
          var errorMessage = '<ul>';
          $.each(data.errors, function(k, msg){
              errorMessage += '<li>' + msg.join('</li><li>') + '</li>';

          });
          errorMessage += '</ul>';

          $('#errorDiv').html(errorMessage);
       }
    },
    ...
  });

$.ajax({
...
成功：功能（数据、状态代码）{
//它的验证错误代码
如果（数据中的状态代码==422&&“错误”{
var errorMessage='
'；
$.each（data.errors，function（k，msg）{
errorMessage+='
'+msg.join（'
'）+'
'；
});
errorMessage+='
'；
$（'#errorDiv'）.html（errorMessage）；
}
},
...
});

我是否有可能访问数据。错误中的错误：函数（err），而不是在成功中访问它：函数（data）。正如我所想，当表单未处理时，它会出错而不是成功。我刚刚测试过，可以访问数据。成功消息：但是我无法访问相同的错误消息：，是否有解决方法？请尝试更新的代码。也许它可以处理失败部分的数据。谢谢William从你的答案中得到了提示，并使它工作了。我用这个方法来实现它。错误：function（xhr，status，error）{var err=JSON.parse（xhr.responseText）；$.each（err.errors，function（name，val）{$（'#'+name+''u error'）.text（val）；}）；Nice@VivekBora，如果我的回答有助于您接受解决方案，那么这个问题将被标记为已解决。谢谢。