Javascript 在“提交”按钮上注册单击事件时,表单输入中的必需属性不起作用
我有一个Django表单,它具有具有必需属性的输入。 我在表单中还有一个DWobject,在提交表单之前应该有一个扫描图像。 我想在提交表单之前验证这个DWobjec,但是当我使用提交按钮上的“click event”进行验证时,它只验证该对象,而忽略了其他必需的字段。当我尝试“on submit”事件时,它只检查所需的输入,而忽略DWobject 是否有人知道如何在验证对象的同时保持所需属性的工作状态 这是我的Javascript代码:Javascript 在“提交”按钮上注册单击事件时,表单输入中的必需属性不起作用,javascript,jquery,html,django-forms,Javascript,Jquery,Html,Django Forms,我有一个Django表单,它具有具有必需属性的输入。 我在表单中还有一个DWobject,在提交表单之前应该有一个扫描图像。 我想在提交表单之前验证这个DWobjec,但是当我使用提交按钮上的“click event”进行验证时,它只验证该对象,而忽略了其他必需的字段。当我尝试“on submit”事件时,它只检查所需的输入,而忽略DWobject 是否有人知道如何在验证对象的同时保持所需属性的工作状态 这是我的Javascript代码: // validating scan object
// 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>
{%csrf_令牌%}
{{User\u attachment\u form.type}
{{User_attachment_form.level}
我发现了问题,我在提交按钮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;
}
});