sun*_*ine 5 javascript php ajax jquery laravel
我正在使用 laravel 5.2，我的问题是：
如何在使用 ajax 提交表单时显示验证错误？
例如：
不使用ajax时，如果没有填写title字段，提交时会出现
“标题字段为必填项”的信息。
并且，当使用ajax时，如何显示上面的信息。
看法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.1.1/css/tether.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="formArticle" class="form-horizontal" role="form">
<fieldset class="row form-group">
<label class="col-xs-2 control-label">Title:</label>
<div class="col-xs-10">
<input id="title" name="title" type="text" class="form-control"
value="{{ old('title') }}">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="row form-group">
<label class="col-xs-2 control-label">Content:</label>
<div class="col-xs-10">
<input id="content" name="content" type="text" class="form-control"
value="{{ old('content') }}">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="row form-group">
<label class="col-xs-2 control-label" for="photo">Photo?</label>
<div class="col-xs-10">
<input id="photo" name="photo" type="file" class="form-control-file">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="form-group">
<div class="col-xs-12">
<button id="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
<div class="alert alert-success" role="alert" hidden>
upload successfully
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
Javascript：
<script>
$(function () {
var articleData = new FormData($('#formArticle')[0]);
$(document).on('submit', '#formArticle', function (e) {
e.preventDefault();
$('input+span>strong').text('');
$('input').parent().parent().removeClass('has-error');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ url('article/') }}",
dataType: 'json',
processData: false,
contentType: false,
cache: false,
data: articleData
})
.done(function (data) {
$(".alert-success").prop("hidden", false);
})
.fail(function (data) {
$.each(data.responseJSON, function (key, value) {
var input = '#formArticle input[name=' + key + ']';
$(input + '+span>strong').text(value);
$(input).parent().parent().addClass('has-error');
});
});
});
});
</script>
控制器：
public function store(Requests\StoreArticleRequest $request)
{
$article = new Article;
$article -> user_id = \Auth::id();
$article->title = $request->title;
$article->content = $request->content;
$photo = $request->photo;
$destinationPath = 'uploads/';
$extension = $photo->getClientOriginalExtension();
$photoName = \Auth::user()->id . '_' . time() . '.' . $extension;
$photo->move($destinationPath, $photoName);
$article -> photo = '/'.$destinationPath.$photoName;
$article->save();
}
商店文章请求：
public function rules()
{
return [
'title'=>'required',
'content'=>'required',
'photo'=>'required'
];
}
如果输入完整，表单数据可以成功保存到数据库中。
但是，当它们没有完全填写或什么都不填写时，
Chrome 调试器的 Preview 和 Response 标签中会显示 json 消息，如下所示：
{
"title":["The title field is required."],
"content":["The content field is required."],
...
}
但是，该消息无法显示在 html 中。
并且，此时，".alert-success"显示。
我不知道我的代码中的问题在哪里。
我认为我对 done() 和 fail() 的理解是不对的。
done() 和fail() 表示ajax请求完成或失败，
但不验证成功或失败，
不管laravel的验证成功或失败，
ajax请求都完成了，
所以，
即使我没有完成输入，
div class="alert alert-success" 总是出现。
您收到成功消息是因为done()收到“良好”响应时会触发该消息。当您收到错误消息时，来自服务器的实际响应仍然是200.
您需要检查data以done()确保它没有错误。如果是title === "The title field is required."，您需要运行当前在您的fail().
.done(function (data) {
if(data.title[0] == 'The title field is required.' ) {
alert('Title is required');
}
else {
$(".alert-success").prop("hidden", false);
}
})
.fail(function (data) {
alert('The server failed somewhere');
});
显然，您想要执行警报以外的其他操作，并且想要检查这两个字段，但这就是要点。