javascript - presets - Validación de Laravel 4 en modal de arranque
laravel update bootstrap (2)
Soy un novato en Laravel 4 y estoy tratando de obtener una validación de formulario en el modo de arranque. Mi modal tiene un formulario con un ingreso de texto y un botón de enviar, y quiero que cuando la validación falla, el modal me muestre el error. Pero el modal, después de la validación y la actualización de la página, está cerrado. Aquí está el código del controlador y la vista:
Código del controlador:
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);
}
Ver código:
<!-- 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>
¿Cómo puedo resolver? Gracias.
SOLUCIONADO
Código del controlador:
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()));
}
Ver código:
<!-- 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>
Estaba enfrentando el mismo problema. Después de investigar en Internet, descubrí que Laravel no es compatible con el método de éxito (''success_msg'').
return Redirect::to(''dashboard'')->withSuccess("Success: avatar updated.");
Aquí hay una discusión completa sobre este tema: https://github.com/laravel/framework/issues/906 .
Pero puede manejar este problema con este enfoque:
- Para mensaje de error: -
[el código tiene que ser agregado en el controlador]
return Redirect::to(''view'')->withErrors(''your error message.'');
[el código tiene que ser agregado a la vista]
@if(isset($errors) && count($errors->all())>0)
<ul>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
- para mensaje succcess: -
[el código tiene que ser agregado en el controlador]
$success_msg=''your success message.'';
Session::flash(''successMsg'', $success_msg);
return Redirect::to(''view'');
[el código tiene que ser agregado a la vista]
@if (Session::has(''successMsg''))
{{ Session::get(''successMsg'') }}
@endif
Este enfoque está funcionando bien para mí. Para una mejor visualización de sus errores, puede usar bootstrap css.
Su mejor opción sería validar el formulario a través de AJAX para evitar que la página se vuelva a cargar por completo. Luego verificaría la respuesta de su solicitud de AJAX para detectar la presencia de errores y los mostraría dentro del modal si existieran.
También puede agregar validación del lado del cliente para evitar que se realice la solicitud hasta que se cumplan las reglas. No recomendaría usar este EN LUGAR de la validación del lado del servidor pero usarlo ASWELL como normalmente es bastante deseable.
Para lograr esto, necesitarías hacer algo en esta línea:
Javascript:
Capture el evento de envío de su formulario y realice una solicitud de 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:
Modifique su método de controlador para detectar si la solicitud actual es una solicitud de AJAX y, de ser así, devuelva la respuesta en JSON en lugar de redirigir. Por ejemplo:
if(Request::ajax())
{
return Response::json(array(''errors'' => $validator->messages()));
}
else
{
return Redirect::back()->withErrors($validator);
}
No he probado nada de ese código, por lo que podría contener algunos errores tipográficos / errores, pero espero que esto lo ayude.