php – Laravel double validation and error response-ThrowExceptions

Exception or error:

I’m trying to create a shift management form where user can create shift time for their employee and also their break time, the break time is the subsection for the shift form and user can dynamically generate and creates many break times as they want for a single shift time.

The creation function and validation part for shift is working but I’m having trouble validating the break time section if the field is not filled in properly. How can I create a validation function which returns a JSON response as the same as the one I did for the shift for each row of the break times. below is my code :

HTML :

{{-- Start Shifts Update Modal --}}
    <div class="modal fade" id="update_shift_modal" tabindex="-1" role="dialog" aria-labelledby="update_shift_modal" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="update_shift_modal_title"></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body update-shift-modal-body">
                    <div id="shift_modal_alert_container">
                        <div class="alert alert-success" style="display:none;"></div>
                        <div class="alert alert-danger" style="display:none;"></div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-5 px-0">
                            <label class="col-md-12 col-form-label font-weight-bold">Shift Name <span class="text-danger">*</span></label>
                            <div class="col-md-12">
                                <input id="shift_name" class="form-control" type="text" placeholder="Enter a Shift Name" name="shift_name" required>
                                <div id="shift_name_error" class="invalid-feedback"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-md-12 col-form-label font-weight-bold">Full Day</label>
                        <div class="col-md-5 px-0">
                            <label class="col-md-12 col-form-label font-weight-bold">Start Work <span class="text-danger">*</span></label>
                            <div class="col-md-12">
                                <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                                    <input id="full_day_start_date" type="time" class="form-control" required>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-time"></span>
                                    </span>
                                    <div id="full_day_start_date_error" class="invalid-feedback"></div>
                                </div>

                            </div>
                        </div>
                        <div class="col-md-5 px-0">
                            <label class="col-md-12 col-form-label font-weight-bold">End Work <span class="text-danger">*</span></label>
                            <div class="col-md-12">
                                <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                                    <input id="full_day_end_date" type="time" class="form-control" required>
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-time"></span>
                                    </span>
                                    <div id="full_day_end_date_error" class="invalid-feedback"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-5 px-0">
                            <div class="col-md-12">
                                <input type="checkbox" id="break_times_checkbox" onclick="displayBreakTimes()"> Break Times
                            </div>
                        </div>
                    </div>
                    <div id="shift_break_times_section" style="display: none;">
                        <div class="form-group row" >
                            <label class="col-md-5 col-form-label font-weight-bold">Shift Break Time</label>
                            <div class="col-md-5" style="text-align: right;">
                                <button class="btn btn-primary fas fa-plus" onclick="appendShiftBreakTimesSection()">
                                </button>
                            </div>
                        </div>
                        <div class="form-group row shift-break-section" >
                            <div class="col-md-5 px-0">
                                <label class="col-md-12 col-form-label font-weight-bold">Start Time</label>
                                <div class="col-md-12">
                                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                                        <input id="shift_break_start_date" type="time" class="form-control shift-break-start-date" required>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                        <div id="shift-break_start_date_error" class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-5 px-0">
                                <label class="col-md-12 col-form-label font-weight-bold">End Time</label>
                                <div class="col-md-12">
                                    <div class="input-group clockpicker" data-placement="left" data-align="top" data-autoclose="true">
                                        <input id="shift_break_end_date" type="time" class="form-control shift-break-end-date" required>
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-time"></span>
                                        </span>
                                        <div id="shift_break_end_date_error" class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="update_shift_submit" onclick="updateShift()" class="btn btn-primary">{{ __('Submit') }}</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    {{-- End Shifts Update Modal --}}

Javascript :

function updateShift() {
    var updateShiftData = {
                            _token: '{{ csrf_token() }}',
                            shift_name: $("#shift_name").val(),
                            full_day_start_work_time: $("#full_day_start_date").val(),
                            full_day_end_work_time: $("#full_day_end_date").val(),
                        };
    if (breakTimesCheckBox.is(":checked")){
        var shiftBreakTimesListData = [];
        var shiftBreakTimesList = shiftBreakTimesSection.children()
        shiftBreakTimesList.each(function (index, shiftBreakTimeEntry) {
            shiftBreakTimesListData.push({
                start_time: $(shiftBreakTimeEntry).find('.shift-break-start-date').val(),
                end_time: $(shiftBreakTimeEntry).find('.shift-break-end-date').val(),
            });
        })
        updateShiftData['shift_break_times_list'] = shiftBreakTimesListData;
    };


    var updateShiftRoute = "{{ route('admin.attendance.shift.add.post') }}";

    $.ajax({
        url: updateShiftRoute,
        type: 'POST',
        data: updateShiftData,
        success: function(response) {
            clearShiftFieldsError()
            getShiftsDatatable();
            if(updateType === 'add'){
                alertContainer.find('.alert-success').css("display", "flex");
                alertContainer.find('.alert-success').html(response);
                alertContainer.find('.alert-danger').css("display", "none");
                shiftUpdateModal.modal('hide');
            }
            if(updateType === 'edit'){
                modalAlertContainer.find('.alert-success').css("display", "flex");
                modalAlertContainer.find('.alert-success').html(response);
                modalAlertContainer.find('.alert-danger').css("display", "none");
            }
        },
        error: function(xhr) {
            if(xhr.status == 422) {
                var errors = xhr.responseJSON.errors;
                var errorMessage = xhr.responseJSON.message;
                clearShiftFieldsError()
                for (var errorField in errors) {
                    if (errors.hasOwnProperty(errorField)) {
                        switch (errorField) {
                            case 'shift_name':
                                updateShiftFields.find('#shift_name').addClass('is-invalid');
                                $('#shift_name_error').html('<strong>' + errors[errorField][0] + '</strong>');
                            break;
                            case 'full_day_start_work_time':
                                updateShiftFields.find('#full_day_start_date').addClass('is-invalid');
                                $('#full_day_start_date_error').html('<strong>' + errors[errorField][0] + '</strong>');
                            break;
                            case 'full_day_end_work_time':
                                updateShiftFields.find('#full_day_end_date').addClass('is-invalid');
                                $('#full_day_end_date_error').html('<strong>' + errors[errorField][0] + '</strong>');
                            break;
                        }
                    }
                }
            }
        }
    });
}

Controller :

    public function addShift(Request $request){
        {
            $user = Auth::user();
            $data = request()->validate([
                'shift_name' => 'required|unique:shifts,shift_name',
                'full_day_start_work_time' => 'required',
                'full_day_end_work_time' => 'required',
            ]);

            $shift = Shift::create($data);

            if(isset(request()->shift_break_times_list)){
                $shift_break_times = request()->shift_break_times_list;
                foreach($shift_break_times as $shift_break_time) {
                    $shiftBreakData = [
                        'start_time' => $shift_break_time['start_time'],
                        'end_time' => $shift_break_time['end_time'],
                        'shift_id' => $shift->id,
                        'created_by' => $user->employee->id,
                    ];
                    $shiftBreakTime = ShiftBreakTime::create($shiftBreakData);
                }
            };
            return response()->json("Shift successfully created!");
        }
    }
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *