Stop the default action of an element using event.preventDefault()

///////////////////////////////////////////////////////////////////////////////////////////////////
//// index.php
///////////////////////////////////////////////////////////////////////////////////////////////////



        <form method="post" action="#">
        <div class="col-md-5">
        <input type="text" name="startdate" id="startdate" class="form-control datepicker">
        <span class="error" id="date-error_strtdt"></span></div>
        <div class="col-md-5">
        <input type="text" name="enddate" id="enddate" class="form-control datepicker">
        <span class="error" id="date-error"></span></div>
        <button class="btn btn-default" id="submitButton" name="submitButton"><i class="fa fa-sort"></i> Submit</button>
        </form>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$("#submitButton").on('click', function () {

alert( $( "#startdate" ).val().length);
alert( $( "#enddate" ).val().length==0);


    if ( ($( "#startdate" ).val().length == 0 ) && ($( "#enddate" ).val().length != 0 )) {
    $("#date-error_strtdt").html("Please Select the Start Date");
    event.preventDefault();
    }
    if (( $( "#enddate" ).val().length == 0 ) && $( "#startdate" ).val().length != 0 ) {
    $("#date-error").html("Please Select the End date");
    event.preventDefault();
    }
    else {
//alert("got both");
}
});
</script>
<?php
 if(isset($_REQUEST['submitButton'])){
 echo("comming here");
 }
?>
///////////////////////////////////////////////////////////////////////////////////////////////////
//// End index.php
///////////////////////////////////////////////////////////////////////////////////////////////////