表单“提交”事件不等待验证 function 返回

Question

我有一个 html 基本表单，在最终提交表单之前我有一些字段需要验证，但是，即使我的验证 function 被我表单的“onsubmit”事件调用，它在提交完成之前实际上并没有执行. 最后，由于 html 表单发送的无效数据甚至在验证方法完成之前，我的后端出现了很多错误。

在我的浏览器中通过 devtools 调试我的页面我可以看到我的验证 function 被调用，但是，提交的发生就像它是异步的，非常类似于 ajax 调用。

我的表格代码：

<form id="frmOrder" onsubmit="return val();">
</form>

我的JavaScript验证方法：

<script type="text/javascript">

        function val() {
            var phone = document.getElementById("inputPhone");
            var date = document.getElementById("inputdate");

            if (phone.length < 10) {
                return false;
            }
         
            return true;
        };
    </script>

我尝试了不同的触发器，例如：使用type ="submit"的<button>标记，或者通过 onsubmit 事件调用方法而不返回 "onsubmit='validate()'"

Answer 1

您必须添加.value ，当您使用 document.getElementById 时，您将获得整个 HTML 元素。

    var phone = document.getElementById("inputPhone").value;

    var date = document.getElementById("inputdate").value;