Обязательное поле формы проходит с ошибкой вместо того, чтобы не дать отправить

Question

Я сделал режим редактирования для уровней компетенции на моем сайте. Поле из формы с именем effective_date является обязательным для ввода, но после нажатия кнопки подтверждения оно проходит, даже если поле пустое. Я хочу, чтобы пользователь запретил отправку, если поле пустое, и выдает ошибку, что это поле обязательно для заполнения.

Я получаю эту ошибку вместо того, что хочу:

send @ jquery.min.js:2395
ajax @ jquery.min.js:2310
postObject @ forms.js:165
update @ update.js:18
(anonymous) @ update.js:10
dispatch @ jquery.min.js:1265
q.handle @ jquery.min.js:1234
forms.js:194 Uncaught ReferenceError: errorHandling is not defined
    at Object.error (forms.js:194)
    at i (jquery.min.js:823)
    at Object.fireWith [as rejectWith] (jquery.min.js:851)
    at A (jquery.min.js:2318)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2387)

Я говорю об этой части:

<div class="j-input">
      <input type="date" name="effective_date_update" 
      id="effective_date_update" required>
</div>

Полный модал редактирования:

<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog"
     style="z-index: 1050; display: none;"
     aria-hidden="true">
    <div class="modal-dialog modal-lg" style="top:1%!important;" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Competence note</h4>
                <button id="edit-competence-btn" type="button"
                        class="btn btn-sm btn-primary waves-effect waves-light f-right">
                    <i style="margin-right: 0;" class="icofont icofont-edit"></i>
                </button>
                <button type="button" class="close competence_cancel_btn close-note" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">
                <div id='display-competence'>
                    <div class="table-responsive" style="word-break: break-word;">
                        <table class="table m-0">
                            <tbody>
                            <tr>
                                <th scope="row">{{trans('personalData.effectiveDate')}}</th>
                                <td>{{$practitioner_competence_level->effective_date}}</td>
                            </tr>
                            <tr>
                                <th scope="row">{{trans('personalData.expiryDate')}}</th>
                                <td>{{$practitioner_competence_level->expiry_date}}</td>
                            </tr>
                            <tr>
                                <p style="margin-left: 0.6em; margin-top: 1em; margin-bottom: 2em" id="notesView"></p>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div id='edit-competence' style='display: none'>
                    <div class="j-wrapper">
                        <form action="" method="post" class="j-pro j-multistep" id="updateForm">
                            <div class="j-content"
                                 style="">
                                <div class="j-row">
                                    <div class="j-unit">
                                        <label class="j-label">{{trans('settings.notes')}}</label>
                                        <div class="j-input">
                                            <textarea name="notes_update" id="notes_update"></textarea>
                                        </div>
                                    </div>
                                    <div class="j-unit">
                                        <label class="j-label">{{trans('personalData.effectiveDate')}}*</label>
                                        <div class="j-input">
                                            <input type="date" name="effective_date_update"
                                                   id="effective_date_update" class="effective_date_error form-control required">
                                        </div>
                                    </div>
                                    @isset($practitioner_competence_level->expiry_date)
                                        <div class="j-unit">
                                            <label class="j-label">{{trans('personalData.expiryDate')}}</label>
                                            <div class="j-input">
                                                <input type="date" name="expiry_date_update" id="expiry_date_update">
                                            </div>
                                        </div>
                                    @endisset
                                    <div class="j-unit">
                                        <h6>*{{trans('auth.requiredfield')}}</h6>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div class="modal-footer" style="padding-bottom: 1em;">
                <button type="button" class="btn btn-default btn-round waves-effect modal-btn notes_cancel_btn"
                        data-dismiss="modal">{{trans('buttons.close')}}
                </button>
                <button type="button" id="update_final_btn" class="btn btn-success btn-round modal-btn"
                        data-dismiss="modal">{{trans('buttons.saveChanges')}}</button>
            </div>
        </div>
    </div>
</div>

Контроллер для обновления:

public function updatePractitioner(Request $request, $id)
    {

        $this->validate($request, [
                'effective_date' => 'required',
            ]
        );
        $selectSpecialtyOption = $_POST['practitioner_specialty_id_update'];
        $fields = $request->all();
        $specialtyfields = (['effective_date'=>$request->get('effective_date_specialty'), 'expiry_date'=>$request->get('expiry_date_specialty'), 'practitioner_specialty_id' => $selectSpecialtyOption]);
        $primary_key = $this->PractitionerRepository->getIdName();
        $primary_key_specialty = $this->PractitionerSpecialtyRepository->getIdName();
        $practitioner_specialty_id = PractitionerSpecialty::where('practitioner_id', $id)->value('practitioner_specialty_id');
        $fields[$primary_key] = $id;
        $this->PractitionerRepository->update($fields);
        $specialtyfields[$primary_key_specialty] = $practitioner_specialty_id;
        $this->PractitionerSpecialtyRepository->update($specialtyfields);
        return back()->with('successUpdate', 'Practitioner has been updated!');
    }

Answer 1

Обязательный атрибут работает только при отправке <input type="submit" value="Submit">

Этот атрибут будет работать правильно

<form>
  <input type="date" name="effective_date_update" required>
  <input type="submit" value="Submit">
</form>

Вам необходимо выполнить собственную проверку, если вы не используете <input type="submit" value="Submit">

Answer 2

Думаю, вы отправляете через javascript.Для этого вы должны проверить каждое поле вручную. Я создал функцию, которая будет проверять все ваши поля, имеющие класс validate

function validateForm() {
  var validated = true;
  $('.validate').each(function() {
    if ( $(this).val() === '' )
        validated = false;
  });
  return validated;
}
$("#update_final_btn").click(function(){
   if(validateForm())
   {
      //Form is Valid Submit from here...
   }else{
      //Form is Not Valid
   }
});

Надеюсь, это сработает.:)