Javascript function not stopping submit

Question

             function checkdates()
             {
                    var startdate = document.forms["frmHolidayRequest"]["startdate"].value;
                    var enddate = document.forms["frmHolidayRequest"]["enddate"].value;
                    if (Date.parse(startdate) > Date.parse(enddate))
                        {
                            alert("The End Date can not be before the Start Date")
                            return false;
                        }

             }

I have this javascript function which is check two inputted dates, one of which is a holiday start date and the other is the end date. If the user selects an end date that is before the start date, the alert pops up, but it submits the form?

<form name="frmHolidayRequest" action="HomePage.asp" onsubmit="return InputBoxValidation() || checkdates() || samedates()" method="post">
<input type="text" class="datepicker" name="startdate" readonly="true" />
<input type="text" class="datepicker" name="enddate" readonly="true" />
<input type="submit" name="submitbutton" value="Submit" />
</form>

Answer 1

Alert does not stop submitting the form. If you want to stop submitting when you go in to the If statement, please try:

function checkdates(e)
             {
                    var startdate = document.forms["frmHolidayRequest"]["startdate"].value;
                    var enddate = document.forms["frmHolidayRequest"]["enddate"].value;
                    if (Date.parse(startdate) > Date.parse(enddate))
                        {

                            alert("The End Date can not be before the Start Date")
                            e.preventDefault();
                            return false;
                        }

             }

Answer 2

Well, your approach is wrong. You need a preventdefault.

Example with jQuery in your javascript:

And remove the onsubmit=yourfunction, cus jquery will intercept the original submit.

$("[name='frmHolidayRequest']").submit(function(event){

    var startdate = $("[name='startdate']").val(); // if you used Name , if u id it's $("#startdate").val(); 
    var enddate = $("[name='enddate']").val();
    if (Date.parse(startdate) > Date.parse(enddate))
       {           
         event.preventDefault();  
         alert("The End Date can not be before the Start Date");
       }
  });

EDIT: You are using names, not id I see for the form name, so my previous code was wrong^^

Answer 3

You should remove the inline submit handler and bind the submit event using jQuery's .ON method.

Defined the checkdates function.

function checkdates() {
    var startdate = document.forms["frmHolidayRequest"]["startdate"].value,
        enddate = document.forms["frmHolidayRequest"]["enddate"].value;

    if (Date.parse(startdate) > Date.parse(enddate)) {
        return false;
    } else {
        return true;
    }
}


$(document).ready(function(){
    $('#YOURFORMID').on('submit', function(e){
        e.preventDefault();

        // If your function returns true, submit the form. 
        if (checkdates()) {
            $(this).submit();
        // If it returns false. Throw your alert.   
        } else {
            alert("The End Date can not be before the Start Date");
        }
    });
});

Hope this helps you.

Answer 4

Your problem is that the alert is blocking the thread and the result from your checkdates() is timeing out. You should prevent the default behavior before you pop up your alert box.

Important: put the preventDefault before your alert

function checkdates(evt)
{
    var startdate = document.forms["frmHolidayRequest"]["startdate"].value;
    var enddate = document.forms["frmHolidayRequest"]["enddate"].value;
    if (Date.parse(startdate) > Date.parse(enddate))
    {
        evt.preventDefault();
        alert("The End Date can not be before the Start Date")
    }
}

Answer 5

The problem here is

return InputBoxValidation() || checkdates() || samedates()

It says return true if any of these are true. You should be using AND, not OR

onsubmit="return return (InputBoxValidation() && checkdates() && samedates());"

or

function validateAll() {
    var testA = InputBoxValidation();
    var testB = checkdates();
    var testC = samedates();
    return testA && testB && testC;
}

and

onsubmit="return validateAll();"