Я новичок в Laravel 4, и я пытаюсь получить валидацию формы в bootstrap modal. Модальные формы имеют форму с текстовым вводом и кнопкой отправки, и я хочу, чтобы при завершении проверки модальность отображала мне ошибку. Но модальная, после проверки и обновления страницы, закрыта. Вот код от контроллера и вид:
Код контроллера:
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 на наличие ошибок и показать их внутри модального, если они существуют.
Вы также можете добавить проверку на стороне клиента, чтобы предотвратить выполнение запроса до тех пор, пока правила не будут выполнены. Я бы не рекомендовал использовать эту команду INSTEAD для проверки на стороне сервера, но с ее использованием ASWELL, как правило, весьма желательно.
Чтобы достичь этого, вам нужно сделать что-то в этом направлении:
Javascript:
Catch отправьте событие вашей формы и выполните запрос 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? } }); });
Backend:
Измените свой метод контроллера, чтобы определить, является ли текущий запрос AJAX-запросом, и если да, верните ответ в JSON вместо перенаправления. Например:
if(Request::ajax()) { return Response::json(array('errors' => $validator->messages())); } else { return Redirect::back()->withErrors($validator); }
Я не тестировал ни один из этих кодов, поэтому может содержать некоторые опечатки / ошибки, но, надеюсь, это поможет вам!
Я столкнулся с такой же проблемой. После исследования в Интернете я обнаружил, что Laravel не поддерживает метод Success ('success_msg').
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
Вот полное обсуждение этой темы: https://github.com/laravel/framework/issues/906 .
Но вы можете справиться с этой проблемой при таком подходе:
– Для сообщения об ошибке: –
[код должен быть добавлен в контроллер]
return Redirect::to('view')->withErrors('your error message.');
[код должен быть добавлен в поле зрения]
@if(isset($errors) && count($errors->all())>0) <ul> @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> @endif
– для сообщения succcess: –
[код должен быть добавлен в контроллер]
$success_msg='your success message.'; Session::flash('successMsg', $success_msg); return Redirect::to('view');
[код должен быть добавлен в поле зрения]
@if (Session::has('successMsg')) {{ Session::get('successMsg') }} @endif
Этот подход отлично работает для меня. Для лучшего отображения ваших ошибок вы можете использовать bootstrap css.