0

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?

16
  • Porque no en vez de hacer la validación en el controlador, haces la validación con este plugin (jqueryvalidation.org) y si el formulario esta lleno y los términos aceptados haces un windows.location.href="" y lo envías a la página que necesites Commented el 9 feb. 2021 a las 19:14
  • Hola @JoséVásquez me parece interesante lo que comenta, pero queria intentar hacerlo de este modo sin utilizar librerias
    – Miguel
    Commented el 9 feb. 2021 a las 19:15
  • No entiendo que quieres hacer, que tiene que ver el scroll aca? Quieres validar el formulario y redirigir a una nueva pagina? Commented el 9 feb. 2021 a las 19:15
  • Hola @JuanRivera , el formulario esta haciendo scroll en la página, como a mitad de la misma, quiero validar el formulario y si es correcto redirigir a una página de agradecimiento, el problema que si hay un campo si rellenar, la página se recarga y se pone al principio de la página, entonces tengo que bajar para ver el mensaje de error.
    – Miguel
    Commented el 9 feb. 2021 a las 19:17
  • @Miguel en ese caso puedes validar con un form(como lo haces) y capturar el evento submit para poder enviarlo por ajax Commented el 9 feb. 2021 a las 19:18

1 respuesta 1

2

Para que te muestre un error en tu mensaje tendrias que cambiar tu div de error por lo siguiente

<div class="alert alert-danger invisible" role="alert" id="error-telefono"></div>

Como ves, estoy agregando un id para identificar el campo de error, despues en tu ajax agrega lo siguiente para mostrar ese mensaje:

error:function(jqXHR, textStatus){
    var fail_msg = jqXHR.responseJSON.errors;
    for (const campo in object) {
        $('#error-'+campo).removeClass('invisible');
        $('#error-'+campo).text(fail_msg[campo][0]);
    }
}

Y estoy recorriendo el JSON de errors para mostrar y asignar el mensaje

Por ultimo, para redirigir a otra pagina solo agrega en tu success window.location.href asi:

window.location.href = "http://.....";

Referencia

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.