提交的 Jquery 验证器表单即使无效答案

【问题标题】：Jquery validator form submitted even if invalid提交的 Jquery 验证器表单即使无效
【发布时间】：2013-08-17 15:29:32
【问题描述】：

我有一个使用 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/

【问题讨论】：

您可能在某处遇到了 JavaScript 错误，导致 JavaScript 执行停止并且表单仍然提交。您的控制台是否显示任何错误？
这不是您的问题的原因，但您根本不需要 submitHandler 回调函数，除非您想覆盖 form 的默认操作，例如如果您以ajax 为例。
它绝对是 PHP，我现在可以毫无困难地在多个静态表单上运行完全相同的代码，即使使用选择器也是如此。有任何 PHP 大师愿意帮忙吗？ :)

标签： php jquery forms validation jquery-validate

【解决方案1】：

试试这个。

$(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"
}
});
});

});

【讨论】：

同样的事情发生了，它一定与PHP有关，代码在静态表单上工作。 .on() 应该可以捕获动态问题...

【解决方案2】：

$(document).ready(function () {

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

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

});

【讨论】：