Jquery validator form submitted even if invalid - php

Question

I have a simple search form using HTML, PHP, and jQuery but the form submits even though some fields are empty and the validator warnings appear for a moment. So I would submit the form, the warnings about "Required field" appear, and it submits anyway. The validator is being triggered but isn't stopping the form.
HTML + PHP
<form action="dater.php" method="post" id="daterange">
<table width = "1000px">
<col width="250px" />
<col width="250px" />
<col width="250px" />
<col width="250px" />
<tr>
<? dateRangeView(); ?>
<td><input class="comment" type="text" name="groups" id="groupname" placeholder="Enter group name"> *</td>
<td><input class="comment" type="text" name="employee" id="staffname" placeholder="Enter employee name"> *</td>
</tr></table>
*Leave these blank to view all<br>
<button class="mainButton" id="viewTimesheets" value="viewTimesheets" type="submit">View</button>
function dateRangeView()
{
$query = "SELECT DISTINCT weekending FROM payroll_ts ORDER BY weeke DESC";
$result = mysql_query($query);
echo'<td><select id="startdate" class="infotable" name="startdate"><option value="">---- Start date ----</option>';
while ($row = mysql_fetch_array($result))
{
echo'<option value="'.$row{'weeke'}.'">'.$row{'weeke'}.'</option>';
}
echo'</select><br><td><select id="enddate" class="infotable" name="enddate"> <option value="">---- End date ----</option>';
$query = "SELECT DISTINCT weekending FROM payroll_ts ORDER BY weeke DESC";
$result = mysql_query($query);
while ($row = mysql_fetch_array($result))
{
echo'<option value="'.$row{'weeke'}.'">'.$row{'weeke'}.'</option>';
}
echo'</select><br></td>';
}
VALIDATOR PLUGIN CODE
<script language="javascript" type="text/javascript">
/*-------------Validator-------------*/
$.validator.setDefaults({
submitHandler: function() { alert("submitted!");
form.submit();}
});
$(function() {
$("#daterange").validate({
rules: {
startdate: "required",
enddate: "required"
},
messages: {
startdate: "required",
enddate: "required"
}
});
});
</script>
I've been at it for four hours now, used .on(), return false; onSubmit() and e.preventDefault(); although I may have gotten the syntax on those messed up... This is the plugin I'm using... http://jqueryvalidation.org/validate/

Answer 1

Try this.
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function (form) {
alert('submitted');
form.submit();
}
});
$('#daterange').validate({
rules: {
startdate: {
required: true
},
enddate: {
required: true
}
}
});
});
Working JsFiddle example Demo
Hope this helps, Thank you
or here is the code for you both works
$(document).ready(function () {
$.validator.setDefaults({
submitHandler: function() { alert("submitted!");
form.submit();}
});
$(function() {
$("#daterange").validate({
rules: {
startdate: "required",
enddate: "required"
},
messages: {
startdate: "required",
enddate: "required"
}
});
});
});

Answer 2

$(document).ready(function () {
$("#daterange").validate({
rules: {
startdate: "required",
enddate: "required"
},
messages: {
startdate: "required",
enddate: "required"
}
});
if($("#daterange").valid()) {
// call your function;
alert("submitted!");
}
});