TypeError: $(…).validate 不是 jQuery 中的函数

TypeError: $(…).validate is not a function in jQuery

“$(…).validate is not a function”jQuery 错误发生在未加载 jQuery 验证插件或以错误顺序加载 jQuery 相关脚本时。

验证插件应该在 jQuery 库之后加载。

这是一个工作示例的 HTML。

索引.html


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- 👇️ Example form from docs  -->
    <form id="commentForm" method="get" action="">
      <fieldset>
        <p>
          <label for="cname">Name (required, at least 2 characters)</label>
          <input id="cname" name="name" minlength="2" type="text" required />
        </p>
        <p>
          <label for="cemail">E-Mail (required)</label>
          <input id="cemail" type="email" name="email" required />
        </p>
        <p>
          <label for="ccomment">Your comment (required)</label>
          <textarea id="ccomment" name="comment" required></textarea>
        </p>
        <p>
          <input class="submit" type="submit" value="Submit" />
        </p>
      </fieldset>
    </form>

    <!-- ✅ FIRST - load jquery ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ SECOND - load jquery validate ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/jquery.validate.min.js"
      integrity="sha512-37T7leoNS06R80c8Ulq7cdCDU5MNQBwlYoy1TX/WUsLFC2eYNqtKlV0QjH7r8JpG/S0GUMZwebnVFLPd6SU5yg=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ THIRD - load additional methods ✅ -->
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.3/additional-methods.min.js"
      integrity="sha512-XZEy8UQ9rngkxQVugAdOuBRDmJ5N4vCuNXCh8KlniZgDKTvf7zl75QBtaVG1lEhMFe2a2DuA22nZYY+qsI2/xA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>

    <!-- ✅ FOURTH - load your JS script ✅ -->
    <script src="index.js"></script>
  </body>
</html>

请注意，我们在加载 jQuery 库之后和加载其他方法之前加载了 jQuery 验证插件。

该index.js文件在所有其他脚本之后加载。

这是index.js文件中的代码：

索引.js


$('#commentForm').validate();

如果您刷新页面并尝试提交表单，您将看到验证开始。

添加 JS 脚本的顺序非常重要，确保在加载 jQuery 库之后加载 jQuery 验证插件。

发生错误的另一个常见原因是 jQuery 脚本的路径不正确。

如果您决定将 jQuery 代码下载到本地文件系统并直接包含它而不是使用 CDN，请确保指定文件的正确路径。

另外，请确保您没有在同一页面上两次包含 jQuery 库或插件。两次加载同一个库可能会导致错误。

结论

“$(…).validate is not a function”jQuery 错误发生在未加载 jQuery 验证插件或以错误顺序加载 jQuery 相关脚本时。

验证插件应该在 jQuery 库之后加载。

–