Get an alert for start time and end time is comparing with shop hours opening and closing time

I have a form for storing shop timings.Here first i have to set the hours opening and closing time for the shop.Then after i have a button for adding pickup times which comes a modal for adding pickup timing details . Here i have two input time , one for start time and another for end time . My issue is when i enter these times which is not between the shop hours opening and closing time it also get stored. Instead i need to show an error message when this situation comes.

<div class="col-xs-4">
                            <div class="form-group">
                                <label for="hours_opening" class="required">@lang('shop.create.hours_opening')</label>

                                <div class="input-group clockpicker">
                                    <input type="text" class="form-control" name="hours_opening[]" value="00:00" required>
                                    <span class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-4">
                            <div class="form-group">
                                <label for="hours_closing" class="required">@lang('shop.create.hours_closing')</label>

                                <div class="input-group clockpicker">
                                    <input type="text" class="form-control" name="hours_closing[]" value="00:00" required>
                                    <span class="input-group-addon">
                                        <i class="fa fa-clock-o"></i>
                                    </span>
                                </div>
                            </div>
                        </div>

<div class="modal-body">
                <div class="form-group">
                    <form id="selfpickupTimeForm" name="selfpickupTimeForm">
                        <strong class="error" id="erromsg"></strong><br>
                        <label for="selfpickup_time_weeek_day">Day</label>
                        <select class="form-control" name="selfpickup_time_weeek_day" id="selfpickup_time_weeek_day">
                            <option value="0">All</option>
                            <option value="7">Sunday</option>
                            <option value="1">Monday</option>
                            <option value="2">Tuesday</option>
                            <option value="3">Wednesday</option>
                            <option value="4">Thursday</option>
                            <option value="5">Friday</option>
                            <option value="6">Saturday</option>
                        </select>
                </div>
                <div class="form-group">
                    <label for="selfpickup_time_from">Time Slot From</label>
                    <input class="form-control" type="time" name="selfpickup_time_from" id="selfpickup_time_from">
                </div>
                <div class="form-group">
                    <label for="selfpickup_time_to">Time Slot To</label>
                    <input class="form-control" type="time" name="selfpickup_time_to" id="selfpickup_time_to">
                </div>
            </div>

via Chebli Mohamed