在提交按钮上注册单击事件时，表单输入中的必需属性不起作用

Question

I have a Django form and it has inputs with the required property. I also have a DWobject inside the form which should have a scanned image before submitting the form. I want to validate this DWobjec before submitting the form but when I do that with "click event" on the submit button it validates only that object and ignored the other required fields. when I tried "on submit" event it checks the required inputs only and ignores the DWobject.

Does anyone know how to to keep the required property working while validating the object at the same time?

This is my Javascript code:

// validating scan object 
    $("#scan_submit").on("click", function (event) {

        event.preventDefault ? event.preventDefault() : event.returnValue = false;

        if (DWObject.HowManyImagesInBuffer == 0) {
            $('#error_if_empty').text('Please scan a file ').css('color', 'red');
        }

        else {

            $('#error_if_empty').text(' ');
            $("#scan_form").submit();
        }
    });

This is my HTML form:

           
  <form method="post" action="{% url 'cu:scan-page' pk=cu.id  %}" id="scan_form">   
   <div class="modal-body">
   {% csrf_token %}
 <input id="id_filename" name="filename" type="text" class="form-control" required>

   {{ User_attachment_form.type  }}
   {{ User_attachment_form.level }}

  <button type="button" class="btn scan-attachment-action-button"onclick="AcquireImage();">
  <img src="{% static 'images/scan_icon.svg' %}"></button>

  <button type="button" class="btn scan-attachment-action-button"onclick="ShowFileEditor();"> 
  <img src="{% static 'images/edit_icon.svg' %}"> </button>                
 <span id="error_if_empty"></span> 
<div id="dwtcontrolContainer"></div>

<div class="modal-footer">
<button type="submit" class="btn btn-primary" id="scan_submit">  </button>  </div> </form>

Answer 1

I found out the problem, I was registering "on submit" event on the submit button id not the form id

when I replace it with the form id it works!

this is the code:

 // validating scan object 
    $("#scan_form").on("submit", function (event) {
        console.log('on submit')

        if (DWObject.HowManyImagesInBuffer == 0) {
            $('#error_if_empty').text('Please scan a file ').css('color', 'red');
            console.log('images = 0')
            return false;
        }

        else {
            $('#error_if_empty').text(' ');
            return true;
        }
    });