1

Estoy haciendo el envío de un email a través de un formulario y funciona bien.

El problema lo tengo en la validación, que cuando no se cumple, ya sea por que no relleno algún campo, etc; me redirige a la página y tengo que bajar hasta el formulario para ver los campos de error mostrados.

¿Cómo podría poner el bloqueo antes, para que si no cumple al validación que le pongo, no ejecute aún el envío, no intente enviar el correo y me refresque la pagina con los errores, pero no entera?

Controlador:

public function store(FormInfoImaginarq $request)
{

    if($validated = $request->validated()){
        Mail::to('[email protected]')->send(new InfoImaginarq($request));
        return redirect('/#contacto');
    } else {
        return redirect('/#contacto');
    }
}

FormRequest:

public function rules()
{
    return [
        'name' => 'required',
        'email' => 'required|email',
        'message' => 'required',
    ];
}

Formulario en la Vista:

{{ Form::open(['method' => 'post' , 'route' => 'infocontacto']) }}

    <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">account_circle</i>
            {{ Form::label('name', 'Introduce tu nombre', ['class' => 'icon_prefix', 'required' => 'required']) }}
            {{ Form::text('name') }}
            @if ($errors->has('name'))
                <small class="form-text text-danger">{{ $errors->first('name') }} </small>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">email</i>
            {{ Form::label('email', 'Introduzca su email', ['class' => 'icon_prefix1', 'required' => 'required']) }}
            {{ Form::email('email') }}
            @if ($errors->has('email'))
                <small class="form-text text-danger">{{ $errors->first('email') }} </small>
            @endif
        </div>
    </div>

    <div class="row">
        <div class="input-field col s12">
            <i class="material-icons prefix">mode_edit</i>
            {{ Form::label('message', 'Escriba su mensaje', ['class' => 'icon_prefix2', 'required' => 'required']) }}
            {{ Form::text('message') }}
            @if ($errors->has('message'))
                <small class="form-text text-danger">{{ $errors->first('message') }} </small>
            @endif
        </div>
    </div>

    <div class="center-align">
        {{ Form::button('<i class="material-icons right">send</i> Enviar', ['type' => 'submit', 'class' =>  'btn waves-effect waves-light deep-purple lighten-2 yellow-text text-accent-1']) }}
    </div>

{{ Form::close() }}
0

1 respuesta 1

1

Algo que puedes hacer del lado cliente es usar la validación de formulario incorporada de HTML5.

Una de las características más importantes de los controles de formulario de HTML5 es la capacidad de validar la mayoría de los datos de usuario sin depender de JavaScript. Esto se realiza mediante el uso de atributos de validación en los elementos del formulario.

Por las reglas que estás poniendo en el lado servidor, estos son los atributos que te interesarán para tus inputs:

  • required: Especifica si un campo de formulario debe completarse antes de que se pueda enviar el formulario.
  • type: Especifica si los datos deben ser un número, una dirección de correo electrónico o algún otro tipo de preajuste específico.

Una vez agregados a los inputs correspondientes, cuando un elemento no es válido y el usuario intenta enviar los datos, el navegador bloquea el formulario y muestra un mensaje de error.

Como estás usando Laravel Collective, puedes especificar atributos HTML adicionales a tus inputs, pasándoles un array con las claves valores correspondientes a esos atributos como tercer parámetro. Para el caso del type ('type' => 'text', 'type' => 'email'), no es necesario, ya que Laravel Collective lo hace automáticamente cuando declaras los inputs con Form::text() y Form::email(). Sólo te restaría agregarles el atributo required:

{{ Form::text('name', null, ['required' => true]) }}

{{ Form::email('email', null, ['required' => true]) }}

{{ Form::text('message', null, ['required' => true]) }}

Sin embargo, la validación en el lado del cliente no debe considerarse una medida de seguridad exhaustiva. Tus aplicaciones siempre deben realizar comprobaciones de seguridad de los datos enviados por el formulario en el lado del servidor, así como también en el lado del cliente, porque la validación en el lado del cliente es demasiado fácil de desactivar, por lo que los usuarios malintencionados pueden enviar fácilmente datos incorrectos a tu servidor.

Continuando con el problema que mencionas, de que cuando falla la validación en el servidor, te redirige a la página y tienes que bajar hasta el formulario para ver los campos de error mostrados, lo que puedes hacer es lo siguiente:

Asignar un atributo id al elemento hacia el que quieres apuntar. Esto puede ser, por ejemplo, un <div> que contenga el formulario, o directamente en la etiqueta <form>:

<div id="contacto">
    {{ Form::open(['method' => 'post' , 'route' => 'infocontacto']) }}

        // aquí va todo el contenido del formulario

    {{ Form::close() }}
</div>

Y en el FormRequest, sobreescribe la propiedad $redirect, para que apunte a la URI de la página donde está el formulario, agregándole la referencia a este id concreto (contacto para el ejemplo), añadiéndolo al final de la URI precedido por una almohadilla. Entonces si el formulario está en una página que se carga al acceder a la URI / de tu proyecto, sobreescribes el redirect a '/#contacto':

class FormInfoImaginarq extends FormRequest
{

    /**
     * La URI para redirigir si la validación falla.
     *
     * @var string
     */
    protected $redirect = '/#contacto';

    // aquí sigue todo lo que ya tengas en el form request
}

Referencias:

Validación de formulario en el lado del cliente.

Laravel Collective Text, Text Area, Password & Hidden Fields

Laravel Form Request Validation.

Laravel propiedad redirect en la clase FormRequest.

Creando hipervínculos Fragmentos de un documento.

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.