bootstrap模式下的Laravel 4验证
Laravel 4 validation in bootstrap modal
我是Laravel 4的新手,我试图在引导模式中获得表单验证。我的模态有一个表单的文本输入和提交按钮,我希望,当验证失败时,模态显示我的错误。但是,在验证和页面刷新之后,将关闭模态。下面是来自控制器和视图的代码:
控制器代码:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::get('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user){
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Redirect::back()->withErrors($validator);
}
视图代码:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'method'=>'post', 'role'=>'form')) }}
<ul>
@foreach($errors->all() as $error)
<div class="alert alert-danger" role="alert">{{ $error }}</div>
@endforeach
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control" id="avatar_src" placeholder="Link of avatar image url">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
如何解决?谢谢。
解决:
控制器代码:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::has('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user->save()){
if(Request::ajax()){
return Response::json(array('success' => true));
}
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Response::json(array('errors' => $validator->errors()->toArray()));
}
视图代码:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'id'=>'avatar_form', 'method'=>'post', 'role'=>'form')) }}
<div class="alert alert-danger avatar_alert" role="alert" style="display: none">
<ul></ul>
</div>
<ul>
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control s_tooltip" id="avatar_src" placeholder="Avatar image links">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
Ajax: <script>
$(document).on('submit', '#avatar_form', function(event){
var info = $('.avatar_alert');
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val() }
$.ajax({
url: "/dashboard/avatar",
type: "POST",
data: data,
}).done(function(response) {
info.hide().find('ul').empty();
if(response.errors)
{
$.each(response.errors, function(index, error){
info.find('ul').append(error);
});
info.slideDown();
}
else if(response.success){
window.location.href = "/dashboard";
}
});
});
</script>
最好的方法是通过AJAX验证表单,以避免完全重新加载页面。然后,您将检查AJAX请求的响应是否存在错误,如果存在,则在模态中显示它们。
您还可以添加客户端验证,以防止在满足规则之前发出请求。我不建议使用这个来代替服务器端验证,但是使用它通常是非常可取的。
要做到这一点,您需要做以下几行操作:
Javascript:捕捉表单的提交事件并发出AJAX请求。
$(document).on('submit', 'form', function(event){
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val(); };
$.ajax({
url: "/dashboard/avatar",
data: data
type: "POST",
}).done(function(response) {
if(response.errors)
{
// Add error to Modal Body
}
else
{
// Show success message, close modal?
}
});
});
后端:修改控制器方法以检测当前请求是否为AJAX请求,如果是,则以JSON形式返回响应,而不是重定向。例如:
if(Request::ajax())
{
return Response::json(array('errors' => $validator->messages()));
}
else
{
return Redirect::back()->withErrors($validator);
}
我没有测试任何代码,所以可能包含一些拼写错误/错误,但希望这有助于你!
我也面临同样的问题。在网上查了一下,我发现Laravel不支持withSuccess('success_msg')方法。
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
下面是关于这个话题的完整讨论:https://github.com/laravel/framework/issues/906。
但是你可以用下面的方法来处理这个问题:-
-对于错误消息:-
[code has to be add in controller]
return Redirect::to('view')->withErrors('your error message.');
[code has been added in view]
@if(isset($errors) && count($errors->all())>0)
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
-对于成功消息:-
[code has to be add in controller]
$success_msg='your success message.';
Session::flash('successMsg', $success_msg);
return Redirect::to('view');
[code has been added in view]
@if (Session::has('successMsg'))
{{ Session::get('successMsg') }}
@endif
这种方法对我来说很有效。为了更好地显示错误,你可以使用bootstrap css.
- Laravel使用AJAX进行登录验证
- Laravel-JS验证不使用所有规则
- Laravel 5.2:使用 ajax 提交表单时如何显示验证错误
- 如何使用js框架验证Laravel 4表单(html)
- 当验证在 laravel 5 中返回 false 时,如何获取选项值的名称
- 从验证重新加载页面后,Select2的Laravel输入值未持久化
- 从客户端调用Laravel验证
- Laravel验证和路由
- Laravel-验证错误后从动态选择菜单返回输入
- Laravel, jQuery -在Laravel中验证后返回括号表示法(在jQuery中点到括号表示法)
- bootstrap模式下的Laravel 4验证
- Laravel验证器消息,在jQuery中迭代
- laravel中的Ajax验证
- 使用Laravel从AJAX返回验证和成功的flash消息
- Parsley.js和Laravel表单验证错误
- 如何使用proengsoft/ Laravel -jsvalidation和Laravel 5验证数组输入
- 使用laravel 4.2和jQuery进行动态文件上传验证
- PHP laravel 5验证错误,输入名称作为关键字
- 直到JS重定向,Laravel ajax身份验证工作
- Laravel ajax验证不显示所有字段