为什么 jQuery validate 不能在我的表单上工作？答案

【问题标题】：Why isn't jQuery validate working on my form?为什么 jQuery validate 不能在我的表单上工作？
【发布时间】：2016-03-21 14:08:36
【问题描述】：

谁能告诉我为什么yourTelephoneNumbers 和yourEmailAddress 字段没有被验证？基本上，我正在尝试设计我的表单，以便用户必须输入电话号码或电子邮件地址。

控制台日志；

错误：引导工具提示需要 Tether (http://github.hubspot.com/tether/) bootstrap.js:2772:1

TypeError: 验证器未定义

<head> 标签中的代码；

<head>
<title><?php echo COMPANY_NAME_DISPLAY; ?></title>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- jQuery Theme CSS -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css">
<!-- Lightbox CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>lightbox.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
<!-- Custom CSS -->
<link rel="stylesheet" href="<?php echo SITE_CSS; ?>style.css">
<!-- jQuery first, then Bootstrap JS. --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script><!-- jQuery UI -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script><!-- Form validation -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script><!-- Form validation extension -->
<script src="http://maps.google.com/maps/api/js"></script><!-- Google Maps -->
<script src="<?php echo SITE_JAVASCRIPT; ?>fancybox/jquery.mousewheel-3.0.6.pack.js"></script><!-- Fancybox -->
<script src="<?php echo SITE_JAVASCRIPT; ?>fancybox/jquery.fancybox.pack.js?v=2.1.5"></script><!-- Fancybox -->
<script src="<?php echo SITE_JAVASCRIPT; ?>jquery.form.min.js"></script><!-- AJAX form -->
</head>

Actual development site - 单击标有“进行查询”的按钮

jsFiddle

【问题讨论】：

你的 jquery 坏了，请检查控制台。
@ParthTrivedi - 请查看我的编辑
它在那里工作并且在控制台中没有错误。我在控制台中收到成功消息。 { "status": "success", "message": "这是成功消息。" }
请在您的 OP 中向我们展示 相关的 RENDERED HTML 标记和 JavaScript。您只是向我们展示了您的 head 部分的 PHP。不要依赖损坏的 jsFiddle 来显示您的代码，也不要指望我们挖掘您的生产站点……这对未来的读者都没有太大帮助。谢谢。

标签： jquery jquery-validate twitter-bootstrap-4 bootstrap-4

【解决方案1】：

由于您没有向我们展示您的 OP 中的实际代码，我只能评论您 jsFiddle 中的各种问题...

您在 <div> 和 <form> 上复制了 id="makeEnquiry"。您不能复制任何id，并且由于.validate() 方法附加到这个复制的id，它根本不起作用，因为它使用来自div 的第一个实例并忽略来自form 的实例。
您必须在rules 和messages 方法内的messages 对象中使用name 属性。您的 HTML 标记完全缺少 name 属性。当name 属性缺失时，jQuery Validate 插件将完全不起作用。
您的 jsFiddle 中有一个额外的 });，导致语法错误。
您的 jsFiddle 缺少 DOM 就绪事件处理程序。
require_from_group 方法需要包含the additional-methods.js file。您的 jsFiddle 中缺少它。
在此插件的早期版本中，require_from_group 方法存在许多错误。您的 jsFiddle 正在使用 jQuery (1.7) 和 jQuery Validate (1.9)，这两者都已经有几年的历史了。更新到最新版本。

工作演示：http://jsfiddle.net/8a3mwkw5/

【讨论】：

@MichaelLB，不客气。但是＃2也是强制性的...如果缺少name属性，此插件将不起作用。