jQuery表单验证简单示例不起作用答案

【问题标题】：jQuery Form Validation simple example not workingjQuery表单验证简单示例不起作用
【发布时间】：2017-04-19 06:26:06
【问题描述】：

我正在尝试学习如何使用 jQuery 验证表单。我在网上找到了一个示例并尝试遵循它，但除了 HTML5 电子邮件验证之外，没有其他验证有效。我试图将 jQuery 函数的执行从 Document.ready 更改为 form.on('submit'.... 但这也不起作用。我的 js 文件在我检查过的指定路径上可用通过执行 ctrl+U 并单击路径，对于我的 jQuery src 和验证 src 也是如此。有人可以告诉我为什么这不起作用以及如何解决此问题的任何提示。

这是我的代码的 JSFiddle 链接： jQuery Code

还有我的代码以防万一：

HTML：

    <html>
    <head>
    <script src="jquery-3.2.1.js"></script>
<script src="jquery.validate.js"></script>
        <script src="form-validation.js"></script>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
        <div class="container">
  <h2>Registration</h2>
  <form action="C:\Users\ito1910\Desktop\jquery practice\jquery_test.html" name="registration" id="registration">

    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="John"/>

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Doe"/>

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="john@doe.com"/>

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="&#9679;&#9679;&#9679;&#9679;&#9679;"/>


    <button type="submit">Register</button>

  </form>
</div>
    </body>
</html>

jQuery:

 // Wait for the DOM to be ready
$(function() {
  // Initialize form validation on the registration form.
  // It has the name attribute "registration"
  $("#registration").validate({
    // Specify validation rules
    rules: {
      // The key name on the left side is the name attribute
      // of an input field. Validation rules are defined
      // on the right side
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        // Specify that email should be validated
        // by the built-in "email" rule
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },
    // Specify validation error messages
    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    // Make sure the form is submitted to the destination defined
    // in the "action" attribute of the form when valid
    submitHandler: function(form) {
      form.submit();
    }
  });
});

CSS：

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

/* Styles */
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
}

.container {
  width: 500px;
  margin: 25px auto;
}

form {
  padding: 20px;
  background: #2c3e50;
  color: #fff;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
form input {
  height: 25px;
  line-height: 25px;
  background: #fff;
  color: #000;
  padding: 0 6px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
form button {
  height: 30px;
  line-height: 30px;
  background: #e67e22;
  color: #fff;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #ff0000;
}

【问题讨论】：

1) libraries/jquery-validation-1.16.0.zip zip 文件的路径不正确，请务必添加 .js 文件。 2) 确保路径 js/form-validation.js 、 libraries/jquery-3.2.1.js 和 libraries/jquery-validation-1.16.0.js 可访问且拼写正确。
@Ashraf 我已将验证源更改为 Google CDN，因为我无法理解我拥有的 ZIP 文件夹。为了简单起见，我还将 CSS 和 JS 文件移动到与 HTML 文件相同的目录中。不过还是不行。
@user258365 请定义“不工作” - 您是否收到控制台错误或一些意外行为，或什么？ “不工作”不足以描述您的问题。还请考虑使用最新版本的代码更新您的小提琴。附言目前，在您的示例中，您引用了 jQuery 两次（一次来自 CDN，一次来自本地文件） - 如果两个文件都实际存在，这将导致问题。
其他观察：1) $("form[name='registration']").validate({ 可以简化为 $("#registration").validate({，因为您的表单有一个 ID。 jQuery 也会更快地找到它，而不是属性搜索。 2）您的表单的“动作”无效。您不能为这样的回发引用本地文件。您需要在您的机器上运行一个网络服务器（IIS Express 是免费的，并且可以很好地进行这种测试）和一个“http://...”URL，尽管看起来您没有任何服务器代码要发布无论如何都返回，因此即使您执行有效的回发，也不会发生任何事情。
@ADyson 我更正了两次引用 jQuery 的错误，并在您建议的 js 文件中进行了更改。通过不工作，我的意思是用户输入的验证没有发生。我没有收到我在 jQuery 代码中编写的消息，例如“您的密码必须至少 5 个字符长”、“请输入您的名字”等。它只是直接转到下一页。

标签： jquery html css validation

【解决方案1】：

我找出了导致我的验证失败的原因。我使用的 CDN URL 原来是我公司的防火墙阻止了它。所以我刚刚从 jqueryvalidation.org 下载了 zip 文件，并从 dist 文件夹中手动复制了 jquery.validate.js 文件并使用了它。现在它正在工作，感谢@Ashraf 和@ADyson 的帮助。

【讨论】：