输入验证不起作用 - 表单仍然提交？答案

【问题标题】：input validation does not work - form gets submitted anyway?输入验证不起作用 - 表单仍然提交？
【发布时间】：2021-10-15 05:40:59
【问题描述】：

我正在创建一个带有表单的网站，但我无法进行验证，也无法弄清楚我做错了什么。我已经尝试了我能想到的一切。 PHP 工作，它会提交，但它会一直提交，并且不会停止提交。

<!DOCTYPE html>
<html lang="En">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="a website for carley Knight art">
  <meta name="keywords" content="art artist painter painting store fine-art">
  <link rel="favicon icon" href="Images/favicon.ico">
  <title>Carley Knight Art</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="slicknav.css">
  <script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/slicknav@1.0.8/dist/jquery.slicknav.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
  <script src="js/final.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $('#nav_menu').slicknav({
        prependTo: "#mobile_menu"
      });
    });
  </script>
</head>

<body>
  <header>
    <a href="index.html"><img src="Images/Pink%20Stationery%20Literacy%20Google%20Classroom%20Header.png" alt="header"></a>
  </header>
  <Nav id="mobile_menu"></Nav>
  <nav id="nav_menu">
    <ul>
      <li><a class="current" href="Index.html">Home</a></li>
      <li><a href="About.html">About</a></li>
      <li><a href="Gallery.html">Gallery</a></li>
      <li><a href="Blog.html">Blog</a></li>
      <li><a href="Shop.html">Shop</a></li>
      <li><a href="faqs.html">FAQs</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <div id="top">
        <h1>Homepage</h1>
        <p>Welcome to Carley Knight Art!</p>
      </div>
      <img src="Images/IMG_2995-768x1024.jpg" alt="carley knight and art" class="center" id="carley">
      <p>Hello My name is Carley Knight and I'm an artist living in Milwaukee, WI. I make abstract art in a variety of different mediums, including fibers, acrylics, and digital.</p><br>
      <button id="readMore"><a href="About.html">Read More</a></button>
    </section>
    <aside>
      <form action="sendmail.php" method="post" name="contact_form" id="contact_form">
        <fieldset>
          <legend>sign up now!</legend><br>
          <p>Sign up for my email list and get a free mini coloring book!</p><br>
          <img src="Images/minicoloirngbook.jpg" alt="mini coloring book"><br>
          <label for="first_name">First Name:</label>
          <input type="text" name="first_name" id="first_name"><span>*</span><br>
          <label for="last_name">Last Name:</label>
          <input type="text" name="last_name" id="last_name"><span>*</span><br>
          <label for="email">Email Address:</label>
          <input type="email" name="email" id="email"><span>*</span><br>
          <label for="verify">Verify Email:</label>
          <input type="email" name="verify" id="verify"> <span>*</span><br>
          <div id="buttons">
            <input type="submit" id="submit" value="Sign Up">
          </div>
        </fieldset>
        <script>
          $("#contact_form").validate();
          debug: true
        </script>
      </form>
    </aside>
  </main>
  <footer>&copy;copywrite 2021 Carley Knight Designs</footer>
</body>
</html>

【问题讨论】：

不要加载两个版本的 jQuery。
您在调用$("#contact_form").validate() 时没有指定任何验证选项。您希望它检查什么？
我应该删除哪个版本？
@Barmar 你这是什么意思？我正在尝试验证表单并确保已填写选项
您可能应该阅读the documentation 以了解如何使用该插件...请注意，您在其中的debug: true 没有任何作用；它必须发送到validate 方法，例如validate({ debug: true })。

标签： javascript jquery jquery-validate

【解决方案1】：

在 HTML 中，您所要做的就是为元素 input 赋予属性 required。

如果您希望获得更多高级验证，那么您必须在 javascript 中进行。

<form>
  <input type="text" required>
  <input value="GO" type="submit">
</form>

【讨论】：

这甚至没有开始回答这个问题。