即使无效,也提交了Jquery验证器表单

时间:2013-08-15 12:34:21

标签: php jquery forms validation jquery-validate

我有一个使用HTML,PHP和jQuery的简单搜索表单,但即使某些字段为空并且验证器警告出现片刻,表单也会提交。所以我会提交表格,出现关于“必填字段”的警告,无论如何它都会提交。验证器正在被触发,但没有停止表格。

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

}

验证员插件代码

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

我现在已经四个小时了,用过.on(),返回false; onSubmit()和e.preventDefault();虽然我可能已经搞砸了那些搞砸了的语法......这是我正在使用的插件...... http://jqueryvalidation.org/validate/

2 个答案:

答案 0 :(得分:0)

试试这个。

$(document).ready(function () {

    $.validator.setDefaults({
        submitHandler: function (form) {
            alert('submitted'); 
            form.submit();
        }
    });

    $('#daterange').validate({ 
        rules: {
            startdate: {
                required: true
            },
            enddate: {
                required: true
            }
        }
    });

});

使用JsFiddle示例 Demo

希望这有帮助,谢谢

或者这两个作品的代码

$(document).ready(function () {

    $.validator.setDefaults({
submitHandler: function() { alert("submitted!"); 
 form.submit();}
});

$(function() {

$("#daterange").validate({
rules: {
startdate: "required",
enddate: "required"
},
messages: {
startdate: "required",
enddate: "required"
}
});
});

});

答案 1 :(得分:0)

$(document).ready(function () {

    $("#daterange").validate({
    rules: {
    startdate: "required",
    enddate: "required"
    },
    messages: {
    startdate: "required",
    enddate: "required"
    }
   });

if($("#daterange").valid()) {
    // call your function;
    alert("submitted!");
}

});