1

Tengo un formulario html donde voy generando campos desde un botón con VueJs, cuando hay datos en los campos mi controlador en Laravel guarda sin problema los datos de las N cantidad de campos que haya generado.

Ahora bien, cuando intento validar estos campos, para que no se envié ningún en blanco o con datos que no corresponden, pero nunca valida los mensajes aqui el codigo:

Formulario

<button @click="addMenu()">Add Menu</button>
<form class="form-inline " @submit.prevent="guardarComida" autocomplete="off">
                <input type="hidden" name="_token" value="{!! csrf_token() !!}">
                <div v-for="(field, key) in fields" :key="key" >
                    {{ key }}
                    <!-- TITULO -->
                    <div class="form-group">
                        <label class="control-label" for="first-name">Titulo <span class="required">*</span>
                        </label>
                        <div>
                            <input id="titulo" :name="'titulo['+key+']'" class="form-control col-md-7 col-xs-12" 
                                v-model="field.titulo" />
                            <div v-if="errors && errors.titulo" class="text-danger">{{ errors.titulo[0] }}</div>


                        </div>
                    </div>

                    <!-- DESCRIPCION -->                    
                    <div class="form-group">
                        <label class="control-label" for="first-name">Descripcion <span class="required">*</span>
                        </label>
                        <div>
                            <input id="menu" :name="'menu['+key+']'" class="form-control col-md-7 col-xs-12" 
                                v-model="field.menu" />
                            <div v-if="errors && errors.menu" class="text-danger">{{ errors.menu[0] }}</div>

                        </div>
                    </div>

                    <!-- FECHA -->
                    <div class="form-group">
                        <label class="control-label">Fecha 
                            <span class="required">*</span>
                        </label>
                        <div>
                            <date-picker id="fecha" :name="'fecha['+key+']'" v-model="field.fecha" 
                                :config="options" @dp-change="semana"></date-picker>
                            <div v-if="errors && errors.fecha" class="text-danger">{{ errors.fecha[0] }}</div>
                            {{ errors }}
                        </div>                        
                    </div>

                </div>   <!--END FOR -->

                    <div class="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                        <button class="btn btn-primary" type="reset">Limpiar</button>
                        <button type="submit" class="btn btn-success">Guardar</button>
                    </div>
</form>

Al inicio tengo un boton que agrega los campos con estas funciones:

        menuBlueprint() {
            return {
                titulo: '',
                menu: '',
                fecha: ''
            };
        },
        addMenu() {
            const vm = this;
            const menuBlueprint = vm.menuBlueprint;

            vm.fields.push(menuBlueprint());
        }

Hasta aquí todo bien, si lleno todos los campos los guarda correctamente en mi base de datos, pero si quiero validar en mi controlador el array de campos que le envio no hace nada, no accede a los mensajes configurados en mi controlador, aqui les dejo el controlador y el codigo que envia los datos:

public function store(Request $request)
{

    $data = [ 'data' => $request->all() ];
    $rules = [
                'menu' => ['required', new AlphaNumericWhiteSpaces],
                'fecha' => 'required|date|date_format:d-m-Y',
                'titulo' => 'required'
            ];

    $messages = [
        'menu.required' => 'Ups! Debe agregar la descripcion del menu',
        'fecha.required' => 'Ups! Debe agregar una fecha',
        'fecha.date' => 'Ups! Tipo de fecha no valido',
        'fecha.date_format' => 'Ups! Formato de fecha no valido',
        'titulo.required' => 'Ups! Debe agregar un titulo de menu',

    ];                

    $validator = \Validator::make($request->all(),$rules,$messages);
    if ($validator->fails()){
        return response()->json(['errores'=>$validator->messages(), 'status' => 'ERROR'],422);

    }
    try {

        foreach ($request->all() as $key => $value) {
            $comidas = new Foods;
            $fecha = \Carbon\Carbon::createFromFormat('d-m-Y', $value['fecha']); 

            $nuevaFecha = $fecha->format('Y-m-d');

            $nombre_dia = $fecha->localeDayOfWeek;
            $numero_dia = $fecha->dayOfWeekIso;
            $comidas->titulo = $value['titulo'];
            $comidas->descripcion = $value['menu'];
            $comidas->nombre_dia = $nombre_dia;
            $comidas->numero_dia = $numero_dia;
            $comidas->fecha = $nuevaFecha; 
            $comidas->save();    

        }

        return response()->json(['mensaje' => '¡Excelente! Menu agregado Correctamente', 'status' => 'OK', 'foods' => $comidas ], 200);

    } catch (\Illuminate\Database\QueryException $QueryException ) {
        return response()->json(['mensaje' => '¡Error! No se pudo guardar el menu', 'status' => 'SQL_ERROR', 'sql' => $QueryException->errorInfo], 422);
    }
}

En mi controlador probé haciendo la validación colocando las reglas de este tipo menu.* ya que segun la documentacion de Laravel el asterico hace la función de leer un array(o eso entendi) pero no me funciono como esperaba. Realmente el problema estaria en poder leer la respuesta del validator en la vista VuejS.

Por ultimo la funcion que envia los datos (Vuejs):

guardarComida() {
                this.errors = [];
                this.sqlerror = '';
                this.mensajeSuccess = '';
                this.fields.week = moment(this.fields.fecha, "DD/MM/YYYY").week();
                axios.post('/comidas/guardar', this.fields).then((response) => {
                    this.success = true;
                    this.mensajeSuccess = response.data.mensaje;
                    const food = response.data.foods;
                    this.fields = [];
                }).catch(error => {

                    if (error.response.status === 422) {

                        if(error.response.data.status == 'SQL_ERROR'){
                            this.sqlerror = error.response.data.mensaje;
                        }
                        this.errors = [error.response.data.errores] || {};

                    }
                });
            },

Como dije mas arriba, desde la vista no logro leer los mensajes de error que me envía el controlador cuando los campos están vacíos, de antemano muchas gracias y disculpen lo extenso del post.

1 respuesta 1

1

Utiliza la sintaxis de punto (.) para validar arrays de datos en Laravel, de esta forma puedes obtener el error puntual para cada campo:

$rules = [
            'menu.*' => ['required', new AlphaNumericWhiteSpaces],
            'fecha.*' => 'required|date|date_format:d-m-Y',
            'titulo.*' => 'required'
        ];

Ya en Vue buscas la forma de organizarlos y mostrarlos según tu código.

4
  • Gracias por responder, de la forma como me indicaste no me funciono, ya que pasa por alto la validacion y no falla, lo que hice fue crear una nueva variable: $data = [ 'data' => $request->all() ]; y en la validacion : ` $validator = \Validator::make($data, [ 'data.*.menu' => ['required', new AlphaNumericWhiteSpaces], ], [ 'data.*.menu.required' => 'Ups! Debe agregar la descripcion del menu', ]);` .
    – Mixzplit
    Commented el 27 feb. 2019 a las 14:22
  • ahora el json de errores es asi: [ { "data.0.menu": [ "Ups! Debe agregar la descripcion del menu" ] pero no se por que no logro acceder desde vue a sus propiedades
    – Mixzplit
    Commented el 27 feb. 2019 a las 14:23
  • Según lo que muestras sí funciona, el resto ya es manejo de la información en JavaScript.
    – Shaz
    Commented el 27 feb. 2019 a las 14:24
  • Si si, claro, funciono, haciendole ciertos cambios, muchas gracias. Lo otro era tratar bien los datos en la vista. Gracias
    – Mixzplit
    Commented el 28 feb. 2019 a las 12:55

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.