无法让 jQuery 验证插件正常工作答案

【问题标题】：Trouble getting jQuery Validation plugin to work无法让 jQuery 验证插件正常工作
【发布时间】：2012-09-16 17:33:37
【问题描述】：

我是 jQuery 新手，虽然我了解它的工作原理，但我无法弄清楚为什么验证插件在我的表单上不起作用。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="/validation/dist/jquery.validate.min.js"></script>
<script type=text/javascript">
    $(document).ready(function(){
    $("#signup").validate();
    });
</script>

表格标题：

<form action="/registration/" method="post" id="signup">

此外，获取最新版本的 jQuery 和验证插件的推荐来源是什么？

【问题讨论】：

使用 ajax.googleapis.com 是获取 jQuery 的最简单方法。您可能不应该直接指向 github.com 来获取 validate 插件，您应该将其下载到您自己的站点。关于它为什么不起作用，您需要向我们展示您 HTML 中的表单字段，并告诉我们您希望它执行哪种验证。
我确实从开发者网站下载了插件，但是我不确定脚本中要包含哪个文件。是不是叫做“grunt.js”的那个？我表单中的字段只是标准的文本/密码/电子邮件字段。现在我只希望它执行默认验证，直到我有机会使用它的规则。
没有“默认验证”。您需要通过 HTML 标记中的属性或通过参数向“验证”函数添加规则。此外，如果您想立即执行验证（在单击“提交”或执行任何操作之前），请调用验证器的 form 函数，如下所示：$("#signup").validate().form();
您需要包含jquery.validate.js 或jquery.validate.min.js，而不是“grunt.js”。
我已经按照建议更新了我的代码。所以为了产生结果，我需要为插件添加规则才能实际运行？也就是说，鉴于上面的代码，它现在不会做任何事情？

标签： jquery jquery-plugins jquery-validate

【解决方案1】：

您需要下载的文件名为“jquery.validate.js”。

默认情况下，验证插件使用输入字段的类进行验证。因此，如果您有电子邮件字段，请使用：

<input type="text" class="email" />

如果需要字段，请在类中添加required，例如：

<input type="text" class="required" />

如果是必填电子邮件，请将它们组合起来：

<input type="text" class="required email" />

它还理解 HTML5 输入类型和属性，所以你可以这样做：

<input type="email" required="required"/>

【讨论】：

【解决方案2】：

您需要为验证器指定规则。您还需要单击“提交”按钮来执行验证。或者，您可能希望使用 Validator 对象的 form 函数来触发验证（通常不建议这样做）。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>

<script type=text/javascript">
    $(document).ready(function(){
        $("#signup").validate({rules: {'company': 'required'}}).form();
    });
</script>

<form action="/registration/" method="post" id="signup">
    Company: <input type="text" name="company" />
    <input type="submit" value="Save" />
</form>

【讨论】：

正如我所说...最好通过单击提交按钮来触发验证（当您这样做时插件会执行验证），而不是调用form 函数。我只是将它用于示例代码以“开箱即用”...
将 {'name': 'required'} 作为 validate() 的参数的目的是什么？
对不起，它必须是“规则”选项......刚刚更正它。这是一个简单的规则：这意味着“名称”字段是必需的。
是name="name"还是class="name"的字段？
确实，这个例子令人困惑。我改了，所以你的疑问将得到解答...每条规则的左侧必须是字段名称，即它必须匹配输入name属性：<input name="fieldname">。右侧可以是插件的内置验证规则之一（“必填”、“电子邮件”、“数字”等），也可以是自定义规则，甚至是一组规则（在这种情况下，您需要一个对象，而不是一个字符串）...