Проверка формы в поле выбора даты не работает должным образом

Question

У меня есть следующие 2 поля, которые предназначены для выбора даты.

В поле зрения:

<div class="form-line">                                
     <input type="text" id="iCaseFileDate" name="CaseFileDate" placeholder="Case File Date*" class="datepicker form-control" required/>                                
</div>

<div class="form-line">
     <input type="text" id="iHearingDate" name="HearingDate" placeholder="Hearing Date*" class="datepicker form-control" required/>                                
</div>

Когда я нажимаю кнопку «Отправить», все поля «inputForm» очень хорошо отображаются с атрибутом «required», как и всякий раз, когда я сохраняюэти поля пустые, а затем нажмите кнопку Отправить, атрибут «required» работает хорошо.Но после этого, если я выберу дату из поля Date-Picker, он не удалит «Это поле обязательно» для поля Дата файла дела и Дата слушания.

Код Javascript:

$(document).ready(function () {

    $('#submit_button').on('click', function () {
        $('#inputForm').valid()
    });
});

    $('#iCaseFileDate').on('change', function () {
        if ($('#iCaseFileDate').val()) {
            $('#iCaseFileDate').removeAttr("required");
        }
    });        

    $('#iHearingDate').on('change', function () {
        if ($('#iHearingDate').val()) {
            $('#iHearingDate').removeAttr("required");
        }
    });

Код кнопки «Отправить»:

<div class="modal-footer">
     <button type="submit" id="submit_button" class="btn btn-success waves-light" onclick="saveData()">SAVE</button>
     <button type="button" class="btn btn-warning waves-red" data-dismiss="modal">Close</button>
</div>

function saveData() {
            $("#inputForm").submit();
        }
        $("#inputForm").on("submit", function (event) {
            event.preventDefault();
            tinyMCE.triggerSave();
            var $this = $(this);

            var frmValues = $this.serialize();
            var isValid = $("#inputForm").valid();
            if (isValid == false) {

            }
            else {
                $.ajax({
                    type: 'POST',
                    url: '/ClientInfo/Save',
                    data: frmValues
                })
                    .done(function (result) {
                        if (result) {
                            alert(result.info);
                            clearInputFields();
                            $('#inputModal').modal('hide');
                            ReloadTable();
                        }
                    })
                    .fail(function (xhr) {
                        alert("error");
                    });
            }

        });

[Изображение добавлено для лучшего разъяснения]

[Перед заполнением любого поля ввода и нажатием кнопки «Отправить» ] [] 1

[ После заполнения значений поля ввода, обязательное сообщение не удаляется для даты файла дела &Дата слушания ] [] 2

Пожалуйста, помогите мне решить эту проблему.Я просто хочу показать сообщение «Это поле обязательно для заполнения» всякий раз, когда эти поля пусты, и скрывать это сообщение, когда в этих полях выбрано значение из указателей даты.

Answer 1

Из вашего вопроса не очень понятно, используете ли вы привязку модели с представлением MVC Razor?

Я думаю, что вы можете использовать приведенный ниже код jquery

$('#iCaseFileDate').on('change', function () {
    if ($('#iCaseFileDate').val().length>0) {
        $('#iCaseFileDate').removeAttr("required");
//comment
//Find the div containing validation message * the field is required* and remove it 
//like below
    $(this).next('.your_validation_message_div').remove(); 

    }
});        

$('#iHearingDate').on('change', function () {
    if ($('#iHearingDate').val().length>0) {
        $('#iHearingDate').removeAttr("required");
 //comment
//Find the div containing validation message * the field is required* and remove it 
//like below
    $(this).next('.your_validation_message_div').remove(); 
    }
});