为什么jQuery验证在我的表单上工作?

时间:2015-12-15 16:58:10

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

有人可以告诉我为什么字段yourTelephoneNumbersyourEmailAddress未经过验证吗?基本上,我试图设计我的表单,以便用户必须输入电话号码或电子邮件地址。

控制台日志;

错误:Bootstrap工具提示需要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 - 点击标有&#39;进行查询&#39;

的按钮

jsFiddle

1 个答案:

答案 0 :(得分:2)

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

  1. id="makeEnquiry"<div>上有<form>个重复。您无法复制任何id,并且由于.validate()方法已附加到此重复的id,因此它不会起作用,因为它使用div中的第一个实例并忽略来自form

  2. 的实例
  3. 必须使用name方法内的rulesmessages对象中的.validate()属性。您的HTML标记完全缺少name属性。缺少name属性时,jQuery Validate插件根本不起作用。

  4. 你的jsFiddle中有一个额外的});导致语法错误。

  5. 您的jsFiddle缺少DOM就绪事件处理程序。

  6. require_from_group方法需要the additional-methods.js file。你的jsFiddle缺少它。

  7. 此插件的先前版本中有require_from_group方法存在许多错误。你的jsFiddle正在使用jQuery(1.7)和jQuery Validate(1.9),这两者现在已经有好几年了。更新到最新版本。

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