form-validation.js:3 jQuery 验证插件未加载

Question

我需要一些验证才能处理联系表单，但这不起作用。它在浏览器上显示错误“form-validation.js：3 jQuery 验证插件未加载。”

这是代码。

https://pastebin.pl/view/bb3037c1 - 这是 javascript。

<meta
  name="description"
  content="Enjoy the finest coffee in Dublin at our cozy cafe."
/>
<!-- SEO - Provides a brief description of the page -->

<!-- SEO - Specifies keywords for the page. -->

<link rel="stylesheet" href="assets/css/main.css" />
<link rel="stylesheet" href="assets/css/contact.css" />
<!-- Load jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- Load jQuery Validation Plugin -->
<script            src="https://cdn.jsdelivr.net/jquery.validation/1.19.5/jquery.validate.min.js">.   </script>

<script src="assets/js/javascript.js"></script>
<script src="assets/js/form-validation.js" defer></script>

<title>Ashabi Bliss - Homepage</title>

<style></style>




  
    <h1>Ashabi Bliss</h1>
  

  <nav class="nosearch">
    <button class="nav-toggle" aria-label="Toggle navigation">☰</button>
    <div class="navigation">
      <a href="./index.html">Home</a>
      <a href="./product.html">Products</a>
      <a href="./about.html">About</a>
      <a href="./contact.html">Contact</a>
    </div>

    <div class="searchcontainer" style="display: none">
      <form class="search-bar">
        <input
          type="text"
          placeholder="Search..."
          aria-label="Search"
          class="search-input"
        />
        <button type="submit" class="search-button">🔍</button>
      </form>
    </div>
  </nav>

  <main class="main_content">
    <section class="form_section">
      <div class="form_section_content">
        <h1>SALES CONTACT FORM</h1>
        <form action="" id="contactForm">
          <label for="firstname"> Name(s)</label>
          <input
            type="text"
            id="firstname"
            name="firstname lastname"
            placeholder="Yours names.."
          />

          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            placeholder="Your email.."
          />

          <label for="phone">Phone</label>
          <input
            type="text"
            id="phone"
            name="phone"
            placeholder="Your phone.."
          />

          <label for="productid">Product ID</label>
          <input
            type="text"
            id="productid"
            name="productid"
            placeholder="Enter Product id.."
          />

          <label for="message">Message</label>
          <textarea
            id="message"
            name="message"
            placeholder="Your Message.."
          ></textarea>

          <input type="submit" value="Submit" />
        </form>
      </div>
    </section>
  </main>

  <footer>
    <small>&copy; 2024 Ashabi Bliss. All rights reserved.</small>
  </footer>
</div>

我尝试使用 form-validation.js 确保在联系表单中进行验证，并且对于每个字段，它会根据 js 中的定义在必要时显示错误

Answer 1

我正在检查您的库在使用浏览器时是否出现错误。

从此链接参考导入正确的库：

https://jqueryvalidation.org/