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

Question

我有一个 Django 表单，它具有带有所需属性的输入。我的表单内还有一个 DWobject，在提交表单之前应该有一个扫描图像。我想在提交表单之前验证此 DWobjec，但是当我使用提交按钮上的“单击事件”执行此操作时，它仅验证该对象并忽略其他必填字段。当我尝试“提交”事件时，它仅检查所需的输入并忽略 DWobject。

有谁知道如何在验证对象的同时保持所需的属性正常工作？

这是我的 JavaScript 代码:

// 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();
        }
    });

这是我的 HTML 表单:

           
  <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

我发现了问题，我在提交按钮 ID 而不是表单 ID 上注册了“提交时”事件

当我用表单 ID 替换它时，它就可以工作了!

这是代码:

 // 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;
        }
    });