javascript - 使用submit()提交表单时必需的属性不起作用

Question

所以我的表单中有这样的输入字段:

<input name="blotter_entry_nr" type="text" class="form-control" id="arrest" 
                    placeholder="Enter Blotter No." required>

我使用以下代码提交了表单:

//handle toolbar event
    $('#toolbarButton').on('toolbarItemClick',
        function (event, buttonClicked) {
            var targetBlock = $(event.target).parents('.article') // get article
            var buttonClickedID = buttonClicked.id // get the id of the button click

            switch (buttonClickedID) {
                case 'saveButton':
                    $( "#case-report-form" ).submit();
                    break;
                case 'menu-remove':
                    removeArticle(targetBlock)
                    break;
            }
    });

//handle form submission
    $("#case-report-form").on('submit',(function(e){
        e.preventDefault();

        var formdata = new FormData(this);  

        CSR.SubmitForm.submit(formdata);
    }));

问题是，当我不在必填字段中提供任何输入时，提交仍然继续。我尝试使用 a 提交表单，并且所需的属性正在工作。

有人可以分享他/她对此的想法吗？谢谢。

Answer 1

您通过 JavaScript 调用其 submit 方法来提交表单 - 在这种情况下，可能的无效表单状态不应取消表单提交。

HTML5, 4.10.22.3 Form submission algorithm ，第4步:

If the submitted from submit() method flag is not set, and the submitter element's no-validate state is false, then interactively validate the constraints of form and examine the result: if the result is negative (the constraint validation concluded that there were invalid fields and probably informed the user of this) then fire a simple event named invalid at the form element and then abort these steps.

由于您使用 submit 方法提交表单，因此设置了从submit() 方法提交 标志，因此此步骤的其余部分不适用 - 浏览器此时不应取消提交过程，即使表单处于无效状态。 (事实上​​，在这种情况下，浏览器甚至不应该运行验证算法。)

但是，您也可以在调用 submit 方法之前通过脚本检查表单的有效性 - 这就是 checkValidity 的作用。方法是为了。

(在调用该方法之前，您可能需要检查浏览器是否支持该方法 - 否则您的代码将在尚未实现此方法的浏览器中中断。)