Javascript onsubmit is not returning any value like true or false. Form can submit without validation

Question

I am developing in my final year school project. Now I faced a problem. Some of the onsubmit function in my forms are not functioning well.

The problem is: I am validating the details filled in in the form. But although the innerHTML already pointed out the wrong by using getElementById , the form still can be submitted. How to stop the form from submitting?

The function does not return any true or false value. I've already checked through the code. But I can't find the mistakes.

I tried to change the function validate() to window.validate = function() , it does not work well either. I tried to change the validate function to only return false . The form is still submitting. I tried event preventDefault but the outcomes become I cannot submit the form.

Javascript part

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 Part

<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>

I want to prevent the form from submitting when there is something wrong.

Answer 1

You can easily fix this by changing your code to this.

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

and change validate() javascript function to this.

   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

On click of the submit button add something like below

<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>

In the validate() function ,you if you return true it will submit,if you return false, it will not submit form,there you can show the error message

Answer 3

Remove everything from the form tag all the submit lines and simply give it a unique id and same goes to the button tag too something like this

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

Then in java script part

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