¿Cómo mostrar el mensaje de error en Blade usando ajax? Mi código funciona bien, el mensaje de validación aparece en el elemento de inspección, pero no en mi forma de hoja. Estoy usando Laravel 8.

Controlador

 public function store(StudentRequest $request) { $request->validate(); $input = $request->all(); Student::updateOrCreate(['id' => $request->id], $input); return response()->json(['success' => 'Added new student']); }

Estoy usando solicitud de formulario para manejar la validación:

Solicitud

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

Y esta es mi espada. printErrorMsg() para mostrar todo el error de validación sobre el formulario, pero no funciona y no mostró nada.

Espada

 <form id="studentForm" name="studentForm" class="form-horizontal" enctype="multipart/form-data" method="POST"> {{ csrf_field() }} <div class="alert alert-danger print-error-msg" style="display:none"> <ul></ul> </div> <input type="hidden" name="id" id="id"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Name</label> <div class="col-sm-12"> <input type="text" class="form-control" id="name" name="name" placeholder="Enter Name" value=""> </div> </div> <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-12"> <input type="text" class="form-control" id="email" name="email" placeholder="Enter Email" value=""> </div> </div> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary" id="saveBtn" value="create">Save changes</button> </div> </form> @endsection @push('scripts') <script type="text/javascript"> $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $('#createNewStudent').click(function() { $('#saveBtn').val("create-student"); $('#id').val(''); $('#studentForm').trigger("reset"); $('#modelHeading').html("Create New Student"); $('#ajaxModel').modal('show'); }); $('#studentForm').submit(function(e) { e.preventDefault(); let formData = new FormData(this); $.ajax({ data: formData, url: "{{ route('students.store') }}", type: "POST", dataType: 'json', contentType: false, cache: false, processData: false, success: function(data) { if($.isEmptyObject(data.error)){ alert(data.success); $('#studentForm').trigger("reset"); $('#ajaxModel').modal('hide'); table.draw(); }else{ printErrorMsg(data.error); } }, }); }); function printErrorMsg (msg) { $(".print-error-msg").find("ul").html(''); $(".print-error-msg").css('display','block'); $.each( msg, function( key, value ) { $(".print-error-msg").find("ul").append('<li>'+value+'</li>'); }); } }); </script> @endpush

Editado:

Resolví esto con la respuesta de linktoahref y el comentario de Sachin Kumar. Elimino la función printErrorMsg() en mi hoja y la cambio a elemento de intervalos para cada campo con id y uso responseText para devolver las cadenas js. Entonces, aquí está el código editado:

Espada:

 <div class="form-group"> <label for="email" class="col-sm-2 control-label">Email</label> <div class="col-sm-12"> <input type="text" class="form-control" id="email" name="email"/> <small id="email_error" class="form-text text-danger"></small> </div> </div> $('#studentForm').submit(function(e) { e.preventDefault(); $('#name_error').text(''); $('#email_error').text(''); let formData = new FormData(this); $.ajax({ data: formData, url: "{{ route('students.store') }}", type: "POST", dataType: 'json', contentType: false, cache: false, processData: false, success: function(data) { if (data.status == true) { alert('Success!'); $('#studentForm').trigger("reset"); $('#ajaxModel').modal('hide'); table.draw(); } }, error: function(reject) { var response = $.parseJSON(reject.responseText); $.each(response.errors, function(key, val) { $("#" + key + "_error").text(val[0]); }) } }); });

Gracias