Buenas tardes y espero que estéis tod@s bien. Tengo una página web que a mitad del scroll, tiene un apartado donde podemos dejar el número de teléfono para que nos llamen. Estoy validando que el campo no este vacio y que además acepten la política de privacidad.
No tengo problemas con la validación, el problema es que del modo que lo estoy haciendo se recarga la página y me lleva al principio de la misma.
Pense en hacerlo en AJAX, pero mi intención es que si esta todo correcto llevarlo a una página de agradecimiento.
Ahora mismo lo estoy haciendo así:
<form action="{{ url('nosotros-llamamos') }}" method="get" class="form-inline col-12 formLlama">
<div class="form-group col-md-6" style="padding: 0px;">
<input type="text" class="form-control inputLetter" name="telefono" id="telefono" placeholder="Introduce tu teléfono..." style="width: 100%;">
@if ($errors->has('telefono'))
<div class="alert alert-danger" role="alert">
{{ $errors->first('telefono') }}
</div>
@endif
</div>
<button type="submit" class="btn btnLlama"><i class="fas fa-phone"></i></button>
<div class="positionTerminos">
<input name="chec" class="chzxc" type="checkbox" id="micheckbox334">
<div class="labTerm">He leído y acepto la <a href="{{ route('app.politicaPrivacidad') }}" title="Política de Privacidad">Política de Privacidad</a></div>
</div>
</form>
En mis rutas:
Route::get('/nosotros-llamamos', 'app@nosotrosLlamamos');
Y en mi controlador:
public function nosotrosLlamamos(Request $request)
{
$request->validate([
'telefono' => 'required'
], [
'telefono.required' => 'Tienes que poner un número de teléfono'
]);
}
Tenéis alguna idea de como poder hacer lo que busco? Gracias
EDICIÓN, PROBANDO A HACERLO CON AJAX
<form method="post" class="form-inline col-12 formLlama" id="llamamos">
<div class="form-group col-md-6" style="padding: 0px;">
<input type="text" class="form-control inputLetter" name="telefono" id="telefono" placeholder="Introduce tu teléfono..." style="width: 100%;">
</div>
<button type="submit" class="btn btnLlama"><i class="fas fa-phone"></i></button>
<div class="positionTerminos">
<input name="aceptaPrivacidad" class="chzxc" type="checkbox" id="micheckbox334">
<div class="labTerm">He leído y acepto la <a href="{{ route('app.politicaPrivacidad') }}" title="Política de Privacidad">Política de Privacidad</a></div>
</div>
</form>
La ruta:
Route::post('/nosotros-llamamos', 'app@nosotrosLlamamos');
El controlador:
public function nosotrosLlamamos(Request $request)
{
$this->validate($request,[
'telefono' => 'required',
'aceptaPrivacidad' => 'accepted'
], [
'telefono.required' => 'Tienes que poner un número de teléfono',
'aceptaPrivacidad.accepted' => 'Tienes que aceptar la politica de privacidad'
]);
if ($request->ajax()) {
return response()->json(['mensaje'=>'validacion correcta']);
}
}
Ahora si no relleno el campo o bien no marco el check, me devuelve esto en el Network de Chrome:
Error 422
Pero me muestra los errores en la consola.
{message: "The given data was invalid.",…}
errors: {telefono: ["Tienes que poner un número de teléfono"],…}
aceptaPrivacidad: ["Tienes que aceptar la politica de privacidad"]
telefono: ["Tienes que poner un número de teléfono"]
message: "The given data was invalid."
Pero ahora como muestro los errores en la vista? y como hago un redirect en el success?
form
(como lo haces) y capturar el eventosubmit
para poder enviarlo porajax