I can't validate data in laravel with ajax without updating the page

I have a problem when validating the fields in Laravel; I am using Ajax to be able to send the data without the page refresh, but sorry the method is not taking it from me and I don’t know why. For what is this?

Controller

public function store(Request $request)
{
$rules = array(
‘casa_academica’=>‘required’,
‘grado_academico’=>‘required’,
‘fecha_egr’=>‘required’,
‘especialidad_etaria’=>‘required’
);
$error = Validator::make($request->all(), $rules);
if ($error->faills())
{
return response()->json([‘errors’ => $error->errors()->all()]);
}
}

View

<div class="tab-pane" id="d_formacion">
       <form action="{{route('FormacionUpdate')}}" method="post"   
enctype="multipart/form-data" id="formacion_store">
           @csrf
       <div class="form-group row">
           <label for="casa_academica" class="col-sm-3 col-form-label">Casa   
academica</label>
           <div class="col-sm-8">
   
               <input type="text" class="form-control" id="casa_academica"   
name="casa_academica" placeholder="Casa academica" @if($formacion)  
value="{{ $formacion->casa_academica}}" disabled @endif>
   
   
               @error('casa_academica')
               <span style="color: red;" class="text-danger error">*Ingresar Casa   
Académica</span><br>
               <!--<span style="color: red; ">*</span><br>!-->
               @enderror
   
           </div>
       </div>
       <div class="form-group row">
           <input type="hidden" class="form-control" id="id_formacion_profesional"   
name="id_formacion_profesional" placeholder="" @if($formacion)   
value="{{$formacion->id_formacion_profesional}}" @endif>
   
           <label for="grado_academico" class="col-sm-3 col-form-label">Grado   
Academico</label>
           <div class="col-sm-8">
               <input type="text" class="form-control" id="grado_academico"   
name="grado_academico" placeholder="Grado Academico"     
value="@if($formacion){{$formacion->grado_academico}}@endif">
               @error('grado_academico')
               <span style="color: red; " class="text-danger error">*Ingresar Grado  

Académico</span>
   
               @enderror
           </div>
       </div>
   
       <div class="form-group row">
           <label for="fecha_egreso" class="col-sm-3 col-form-label">Fecha de   
Egreso</label>
           <div class="col-sm-8">
               <input class="form-control" type="number" onkeydown="return false;"   
id="fecha_egreso" name="fecha_egreso" min="2000" max="2100"     
value="@if($formacion){{$formacion->fecha_egreso}}@endif"   
placeholder="Fecha de egreso">
               @error('fecha_egreso')
               <span style="color: red; ">*Ingresar Fecha de Egreso</span>
               @enderror
           </div>
       </div>
       <div class="form-group row">
           <label for="especialidades_etaria" class="col-sm-3   
col-form-label">Especialidad Etaria</label>
           <div class="col-sm-8">
               <select class="form-control select2 select2-hidden-accessible"   
name="especialidad_etaria" id="especialidades_etarias">
                   <option value="">-- {{ __('Selecciona una especialidad') }}   
--</option>
                   @foreach($especialidadEtarias as $especialidad)
                       <option value="{{ $especialidad->id_especialidad_etaria }}">{{   
$especialidad->descripcion }}</option>
                   @endforeach
               </select>
               @error('especialidad_etaria')
               <span style="color: red;" class="text-danger error">*Ingresar Especialidad
Etaria</span>
               @enderror
           </div>
       </div>
       <div class="form-group row">
           <label for="fecha_egr" class="col-sm-3 col-form-label">Especialidad   
Formación</label>
           <div class="col-sm-8">
               @foreach($especialidadFormacion as $especialidad)
                   <div class="form-check">
                       <input class="form-check-input" type="checkbox" value="{{   
$especialidad->id_especialidad }}" name="especialidad_formacion[]"  
id="especialidad_formacion">
                       <label class="form-check-label" for="especialidad_formacion">
                           {{ $especialidad->nombre }}
                       </label>
                   </div>
               @endforeach
               <span class="err" style="color: red; display: none;">Solo puedes   
seleccionar 4 opciones</span>
           </div>
       </div>
           <input type="hidden" value="{{$user->id_psicologo}}" name="id_psicologo"   
id="id_psicologo">
   
       <div class="form-group row">
   
           <div class="offset-sm-3 col-sm-8" id="div_confirmacion2">
               <button type="submit" class="btn btn-submit indigo white-text text-bold   
float-right btn-submit" name="update_formacion"
id="update_formacion"    value="Agregar">
                   Guardar cambios</button>
           </div>
   
   
       </div>
       </form>
   </div>

Ajax

$('#formacion_store').on('submit', function (event){
    event.preventDefault();
    if ($('#update_formacion').val()=='Agregar')
    {
        $.ajax({
           url:"{{route('FormacionUpdate')}}",
           method: "POST",
           data: new FormData(this),
           contentType: false,
           cache: false,
           processData: false,
           dataType: "json",
           success: function (data)
           {
               var html='';
               if (data.errors)
               {
                   html = '<div class="alert alert-danger">';
                   for (var count = 0; count < data.errors.length; count++)
                   {
                       html += '<p>' + data.errors[count] + '</p>';
                   }
                   html += '</div>';
               }
               if (data.success)
               {
                    html = '<div class="alert alert-success">' + data.success + '</div>';
                    $('#formacion_store')[0].reset();
               }
           }

        });
    }
});

Have you tried adding an onclick() event to the button?

And there, how should I do it? excuse the ignorance, recently i’m getting into this ajax thing.

Try this example:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.