Thursday, 15 August 2013

Jquery validator form submitted even if invalid

Jquery validator form submitted even if invalid

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/

No comments:

Post a Comment