Javascript onsubmit 不返回任何值，如真或假。表单无需验证即可提交

Question

我正在开发我最后一年的学校项目。现在我遇到了一个问题。onsubmit我的表单中的某些功能无法正常运行。问题是：我正在验证表单中填写的详细信息。但是虽然使用innerHTML已经指出了错误getElementById，但表单仍然可以提交。如何阻止表单提交？该函数不返回任何true或false值。我已经检查了代码。但我找不到错误。我试图将函数更改validate()为window.validate = function()，它也不能很好地工作。我试图将验证函数更改为仅返回false. 表单仍在提交中。我尝试了事件，preventDefault但结果变成了我无法提交表单。Javascript 部分function check_location() {    var user_address = document.getElementById("location");    var user_address_mess = document.getElementById("addressvalidate");    var checkaddress;    if (user_address.value == "") {        //.....        return false;    } else if (user_address.value.length <= 10) {        //.....        return false;    } else {        //....        return true;    }}function check_stime() {    var starttime = document.getElementById("starttime");    var mess_starttime = document.getElementById("mess_starttime");    var check1;    if (starttime != null) {        if (starttime.value == "") {            //...            return false;        }        else if (starttime.value < "08:00" && starttime > "19:00") {            //...            return false;        }        else {            //...            return true;        }    }}function check_date() {    today = new Date();    today.setDate(today.getDate() + 14);    var eventdate = document.getElementById("date").value;    eventdate1 = new Date(eventdate);    var mess_date = document.getElementById("mess_date");    var check2;    if (document.getElementById("checkdate") != null) {        var checkdate = document.getElementById("checkdate").innerHTML;    }    if (eventdate != null) {        if (eventdate.value == "") {            //...            return false;        }        else if (eventdate1 <= today) {            //...            return false;        }        else {            //...            return true;        }    }}

Answer 1

您可以通过将代码更改为此来轻松解决此问题。

<form id="myForm" onsubmit="event.preventDefault(); validate();">

并将 validate() javascript 函数更改为此。

   function validate() {

    checkstime = check_stime();

    checketime = check_etime();

    checkdate = check_date();

    checklocation = check_location();

    if (checklocation == false || checkstime == false || checketime == false || checkdate == false) {

        return false;

    } else {

        document.getElementById("myForm").submit();

    }

}

Answer 2

单击提交按钮添加如下内容

<button onclick="return validate()" style="margin-bottom:50px;" type="submit" id="submit"  name = "addtocart" class = "btn btn-primary"><span class = "glyphicon glyphicon-floppy-disk"></span> Submit</button>

在validate()函数中，如果你返回true它会提交，如果你返回false它不会提交表单，你可以在那里显示错误信息

Answer 3

删除所有提交行的表单标签中的所有内容，并简单地给它一个唯一的 id，按钮标签也是如此

<form id ="my_form" action="/action_page.php">

  <button id="u_id">submit</button>

</form>

然后在java脚本部分

var form = document.getElementById("my_form");

document.getElementById("u_id").addEventListener("click", function () {

  checkstime = check_stime();

    checketime = check_etime();

    checkdate = check_date();

    checklocation = check_location();

    if (checklocation == false || checkstime == false || checketime == false || checkdate == false) {

       //show error msg

    } else {

        form .submit();

    }

});