how to make validation using ajax Laravel 5.3

Question

I am using Laravel 5. In my OrganisationsController I have a method addItem

 public function addItem(Request $request)
    {
        $rules = array(
            'nom' => 'required',
        );
        // for Validator
        $validator = Validator::make(Input::all(), $rules);
        if ($validator->fails())
            return Response::json(array('errors' => $validator->getMessageBag()->toArray()));

        else {
            $section = new Section();
            $section->nom = $request->nom;
            $section->save();
            return response()->json($section);
        }
    }

Ajax code

    $("#add").click(function() {
            $.ajax({
                type: 'post',
                url: '/addItem',
                data: {
                    '_token': $('input[name=_token]').val(),
                    'nom': $('input[name=nom]').val()
                },
                success: function(data) {
                    if ((data.errors)) {
                        $('.error').removeClass('hidden');
                        $('.error').text(data.errors.title);
                        $('.error').text(data.errors.description);
                    } else {
                        $('.error').remove()
                        $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom +  "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); }
                   }
                });

            $('#noom').val('');
        });

html code

<div class="form-group row add">
    <div class="col-md-5">
        <input type="text" class="form-control " id="noom" name="nom"
               placeholder="New section here" required>
		<p class="error text-center alert alert-danger hidden"></p>
    </div>
    <div class="col-md-2">
        <button class="btn btn-warning" type="submit" id="add">
            <span class="glyphicon glyphicon-plus"></span> Add new Section
        </button>
    </div>

</div>

I don't know why my validation not work. Please suggest a example for this. I am using laravel 5. I have searched so many sites. But I cannot get solution for this.

Rwd · Accepted Answer · 2016-11-04 12:30:53Z

1

If your validations fails it will return with a status code (error code) of 422.

In your $.ajax you're only using success which won't be called if your validation fails.

You will need to add an error method to your ajax options. Using your above code you would have something like:

success: function (data) {
    $('.error').remove()
    $('table').append("<tr class='section" + data.id + "'><td>" + data.id + "</td><td>" + data.nom + "</td><td><button class='edit-modal btn btn-info' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-edit'></span> Edit</button> <button class='delete-modal btn btn-danger' data-id='" + data.id + "' data-nom='" + data.nom + "'><span class='glyphicon glyphicon-trash'></span> Delete</button></td></tr>"); 
},
error: function (data) {
    if (data.errors) {
        $('.error').removeClass('hidden');
        $('.error').text(data.errors.title);
        $('.error').text(data.errors.description);
    }
}

Hope this helps!

answered Nov 4, 2016 at 12:30

Rwd

35.3k7 gold badges71 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

itsmed Over a year ago

it still in the same problem :(

itsmed Over a year ago

i found the solution !!! the solution is remove the condition if(data.errors) thanks for help

Syamsoul Azrien · Accepted Answer · 2022-10-12 05:28:10Z

1

for jquery 3 and above, use this code

$.ajax({
      type: 'post',
      url: '/addItem',
      data: {
           '_token': $('input[name=_token]').val(),
           'nom': $('input[name=nom]').val()
      }
}).done(function(data){
      //if success, do this
      console.log(data);
      alert('success');
}).fail(function(jqXHR){
      if (jqXHR.status == 422) {
             var errors = (jqXHR.responseJSON);
             console.log(errors);
      }
});

edited Oct 12, 2022 at 5:28

answered Aug 23, 2018 at 3:25

Syamsoul Azrien

2,8026 gold badges34 silver badges59 bronze badges

Collectives™ on Stack Overflow

how to make validation using ajax Laravel 5.3

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related