Skip to content Skip to sidebar Skip to footer

Display Error Message In Modal Using Ajax, Laravel

I'm new to Laravel, I have a problem displaying errors on my project. I'm using laravel request for validation and AJAX to submit form inside a modal. I would like to see the error

Solution 1:

Add in your blade to every field:

<!-- ... --><divclass="col"><label>First name</label><divclass="validation-message"></div><inputname="first_name"id="first_name"type="text"class="form-control"placeholder=""autocomplete="off"></div><!-- ... -->

And to your js:

// ...
$.ajax({
        url: "/users-listing",
        data: payload,
        type: "POST",
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    }).done(function(res) {
        $("#addModal .fa-spinner").addClass('d-none');
        $("#addModal .form-message-container").html(res.message).addClass('text-success').fadeIn(1000);
        table.draw(false);
        setTimeout(() => {
            $("#addModal .form-message-container").html('').removeClass('text-success').fadeOut();
            $("#addModal [name=first_name]").val('');
            $("#addModal [name=middle_name]").val('');
            $("#addModal [name=last_name]").val('');
            $("#addModal [name=email]").val('');
            $("#addModal [name=cellphone]").val('');
            $("#addModal #closeModal").click();
        }, 3000);
    }).fail(function(err) {
        $("#addModal .fa-spinner").addClass('d-none');
        $("#addModal .form-message-container").html(err.responseJSON.message).addClass('text-danger').fadeIn(5000);
        setTimeout(() => {
            $("#addModal .form-message-container").html('').removeClass('text-danger').fadeOut();
        }, 5000);
        for (var [ el, message ] ofObject.entries(err.responseJSON.errors)) {
            $('#' + el).addClass('is-invalid');
            $('#' + el).prev('.validation-message').text(message).addClass('is-invalid');
        }
    });
// ...

Solution 2:

I was able to solve this by changing my route, and the error handling in AJAX. Thanks for all the inputs ideas here. :)

My fix: AJAX error code

Post a Comment for "Display Error Message In Modal Using Ajax, Laravel"