Laravel, how to show forms error with ajax submit?

Question

I use ajax to submit a form without having to reload the page after, but I really don't know how to get the forms errors, especially for the required fields.

Here is my form, it's a simple form with two datepicker:

<form>
  <div class="form-group row">
    <label for="date_debut" class="col-md-4 col-form-label text-md-right">Date de début</label>

    <div class="col-md-6">
      <input type="text" id="date_debut" name="date_debut" class="datepicker-here form-control" data-timepicker="true" data-language='fr' placeholder="Choisir une date" />
     </div>
   </div>

   <div class="form-group row">
     <label for="date_fin" class="col-md-4 col-form-label text-md-right">Date de fin</label>

     <div class="col-md-6">
        <input type="text" id="date_fin" name="date_fin" class="datepicker-here form-control" data-timepicker="true" data-language='fr' placeholder="Choisir une date" />
     </div>
    </div>

    <div class="form-group row mb-0">
      <div class="col-md-6 offset-md-4">
        <button id="ajoutDispoButton" onclick="myfunction()" type="button" class="btn btn-primary">
                                            Ajouter
        </button>
      </div>
     </div>

     <input type="hidden" id="user_id" name="user_id" class="form-control" value="{{$user->id}}" required>
</form>

And here is my Ajax call :

 function myfunction(param){
        var date_debut = $('#date_debut').val();
        console.log(date_debut);
        var date_fin = $('#date_fin').val();
        var user_id = $('#user_id').val();

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $.ajax({
            url: '{{ route('createDispo') }}',
            type: 'POST',
            dataType: "json",
            data: {
                user_id: user_id,
                date_debut: date_debut,
                date_fin: date_fin,
            },

            success: function (data) {
                $("#centralModalSuccess").modal();
                $("#date_fin").val("");
                $("#date_debut").val("");
            },
            error: function (data) {
                var errors = data.responseJSON;
                console.log(errors);
            }
        });
    }

And here my controller :

public function createDispo(Request $request){
    $user = User::find($request->user_id);
    $disponibilite = new Disponibilite();
    $disponibilite->date_debut = Carbon::createFromFormat('d/m/Y H:i',$request->date_debut);
    $disponibilite->date_fin =  Carbon::createFromFormat('d/m/Y H:i',$request->date_fin);
    $user->disponibilites()->save($disponibilite);

    return response()->json(['ok' => 'ok']); // Return OK to user's browser
}

I think this is not the right way to proceed, but this work. The problem is that I want to handle the validations errors, my fields are required but I can send the ajax call even if they are empty.

Anyone know how to do that?

do you want to block sending the ajax call? Or display the errors after the call returns? — Thijs Steel, Jun 24 '18 at 19:07
I don't know if there is a best solution, if the both do the same thing I want the most simple ^^ — Spialdor, Jun 24 '18 at 19:21
possible duplicate of https://stackoverflow.com/questions/162159/javascript-client-side-vs-server-side-validation — Thijs Steel, Jun 25 '18 at 08:11

score 0 · Answer 1 · answered Jun 25 '18 at 00:23

0

you can make form validation with jquery instead of laravel validation

Look at this question : A simple jQuery form validation script

answered Jun 25 '18 at 00:23

boudlal

82
5

score 0 · Answer 2 · answered Jun 25 '18 at 09:16

0

Add validation in controller function

public function createDispo(Request $request){
   $request->validate([
    'date_debut' => 'required',
    'date_fin' => 'required',
]);
// your code 
}

and display the errors in html.

answered Jun 25 '18 at 09:16

Jinal Somaiya

1,931
15
29

Laravel, how to show forms error with ajax submit?

2 Answers2