“简单”jquery 验证示例。难道我做错了什么？

Question

切入正题。有这个表格：

<form action="/Home/AskQuestion" method="post" id="question">
<div class="name">
<label>Name</label><br>
<input type="text" class="name required">
</div>
<div class="email">
<label>Email</label><br>
<input type="text" class="email required">
</div>
<div class="subject clearleft"><label>Subject</label><br> <select name="GroupId" class="emailSubject required" id="SubmitAQuestionEmailSubject"><option value="0">Customer Service</option><option value="1">Parts Request</option><option value="2">Product Question</option><option value="3">GCRR</option></select></div>
<div class="question clearleft">
<label>Question</label><br>
<textarea cols="20" rows="2" class="required"></textarea>
</div>
<input type="submit" class="submit">
</form>

还有这段代码：

$(document).ready(function(){ $("form").validate(); });

谷歌搜索“jquery.validate 示例”给了我各种各样的“工作”示例，就像这样，如果任何 class="required" 字段为空白，这将阻止表单提交。 jquery 验证页面上的示例对我有用。

当我将“必填”输入留空时，我的表单仍会提交。我到底做错了什么？

编辑：以某种方式丢失了最初在这篇文章中的一些信息......

我同时包含 jquery (1.6.1) 和 jquery 验证（来自文件头的 1.6）脚本文件。 Jquery 包含在 jquery.validation 之前。我已经用 firebug 验证了正在找到脚本，并且在 firebug 或 Firefox 错误控制台中都看不到任何错误。

编辑2：

有趣的是，用此代码替换 $("form").validate() 似乎会触发验证，但同样，只有表单（名称）中的第一个输入被验证...

$(".submit").click(function (evt) {
    if ($("form#question").validate().form()) {
        alert("valid");
    }
});

Answer 1

您是否包含jQuery Validation plugin？

更新 1

既然你说你已经包含了 jQuery 验证插件。那么，我唯一能建议你的就是试试这个：

$(document).ready(function(){ $("#question").validate(); });

更新 2

您应该在输入中添加minlength 和maxlength 属性。验证不像魔术一样工作。它应该从某个地方获取要验证的属性。例如，为Name 输入元素添加minlength="2"。

Answer 2

您是否同时加载 jQuery 和验证插件脚本？

如果你想偷懒：

<script type="text/javascript" src="jquery-latest.min.js"></script>
<script type="text/javascript" src="jquery.validate.min.js"></script>

更新：

每个input 值都需要一个与之关联的name=""。否则验证将不起作用。

Answer 3

validate() 方法没有内置在 JavaScript 或 jQuery 中。您需要定义该方法，或包含 Shef 提到的验证插件。

编辑：

为我工作：http://jsfiddle.net/pdt6h/