Javascript onsubmit不返回任何值，如true或false。 表单可以提交而无需验证

Question

我正在最后一年的学校项目中进行开发。 现在我遇到了一个问题。 我的表单中的某些onsubmit函数运行不正常。

问题是：我正在验证表单中填写的详细信息。 但是，尽管innerHTML已经通过使用getElementById指出了错误，但仍可以提交表单。 如何阻止表单提交？

该函数不返回任何true或false值。 我已经检查了代码。 但是我找不到错误。

我试图将功能validate()更改为window.validate = function() ，它也不起作用。 我试图将validate函数更改为仅返回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;
        }
    }
}

function check_etime() {

    var starttime = document.getElementById("starttime");
    var endtime = document.getElementById("endtime");
    var mess_endtime = document.getElementById("mess_endtime");
    var eventdate = document.getElementById("eventdate");
    var check3;

    if (endtime != null) {
        if (endtime.value == "") {
           // ...
            return false;
        }
        else if (endtime.value == starttime.value || endtime.value <= starttime.value) {
           // ...
            return false;
        }
        else if (endtime.value <= starttime.value && eventdate.value <= fulldate) {
           // ...
            return false;
        }
        else if (endtime.value < "09:00" && endtime.value > "22.00pm") {
           // ...
            return false;
        }
        else {
            //...
            return true;
        }
    }
}

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 {
        return true;
    }
}

HTML部分

<div class="g-text-center--xs g-margin-b-40--xs">
    <h2 class="g-font-size-30--xs g-color--black">Booking Form</h2>
</div>

<br>
<form autocomplete="off" name="form_submit" onsubmit=" return validate();" method="post" action="">
    <div class="g-margin-b-30--xs">
        <p><b>Package Name :</b>
            <input type="text" name="pname" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" value="<?php echo $pack1['package_name']?>" style="width:200px; font-weight:bold; color:black;" disabled>
        </p>
    </div>

    <div class="g-margin-b-30--xs">
        <p><b>Package Price :</b>
            <input type="text" name="pprice" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" value="RM <?php echo $pack1['package_price']?>" style="width:200px; font-weight:bold; color:black;" disabled>
        </p>
    </div>

    <div class="g-margin-b-30--xs">
        <b>Event Date :</b>
        <input onfocusout="check_date()" name="date" id="date" type="date" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:400px;  color:black;">
        <span id="mess_date" style="color:red;font-weight:normal;"></span>
    </div>

    <div class="g-margin-b-30--xs">
        <b>Start Time :</b>

        <input onfocusout="check_stime()" name="starttime" id="starttime" type="time" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:500px;" />
        <span id="mess_starttime" style="color:red;font-weight:normal;"></span>
    </div>

    <div class="g-margin-b-30--xs">
        <b>End Time :</b>
        <input onfocusout="check_etime()" name="endtime" id="endtime" type="time" class="form-control s-form-v3__input g-bg-color--white-opacity-lightest" style="width:500px;" />
        <span id="mess_endtime" style="color:red;font-weight:normal;"></span>
    </div>

    <b>Event Location :  </b>
    <br>
    <textarea class="form-control s-form-v2__input" name="location" id="location" style=" width:500px; font-weight:bold; text-align:left;" onfocusout="check_location()"></textarea>

    <span style="color:red;font-weight:normal;" id="addressvalidate"></span>

    <div class="g-text-center--xs">
        <br>

        <button style="margin-bottom:50px;" type="submit" id="submit" name="addtocart" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-disk"></span> Submit</button>
        <div class="clearfix"> </div>
    </div>

</form>

我想防止出现错误时提交表单。

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();
    }
});