表單“提交”事件不等待驗證 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;