为什么 jQuery 不验证我的表单?
Why isn't jQuery validate working on my form?
谁能告诉我为什么字段 yourTelephoneNumbers
和 yourEmailAddress
没有被验证?基本上,我正在尝试设计我的表单,以便用户必须输入 phone 号码或电子邮件地址。
控制台日志;
错误:Bootstrap 工具提示需要 Tether (http://github.hubspot.com/tether/) bootstrap.js:2772:1
类型错误:验证器未定义
<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 - 单击标有 'Make Enquiry'
的按钮
由于您没有向我们展示您的 OP 中的实际代码,我只能评论您 jsFiddle 中的各种问题...
您在 <div>
和 <form>
上复制了 id="makeEnquiry"
。您不能复制任何 id
,并且由于 .validate()
方法附加到这个复制的 id
,它根本不起作用,因为它使用 div
中的第一个实例并忽略来自 form
.
的实例
您必须在rules
和messages
对象中使用name
属性[=14] =] 方法。您的 HTML 标记完全缺少 name
属性。当缺少 name
属性时,jQuery 验证插件将完全不起作用。
您的 jsFiddle 中有一个额外的 });
导致语法错误。
您的 jsFiddle 缺少 DOM 就绪事件处理程序。
require_from_group
方法需要包含 the additional-methods.js
file。您的 jsFiddle 中缺少它。
这个插件以前版本的require_from_group
方法有很多错误。您的 jsFiddle 使用的是 jQuery (1.7) 和 jQuery Validate (1.9),它们都已经有好几年了。更新到最新版本。
谁能告诉我为什么字段 yourTelephoneNumbers
和 yourEmailAddress
没有被验证?基本上,我正在尝试设计我的表单,以便用户必须输入 phone 号码或电子邮件地址。
控制台日志;
错误:Bootstrap 工具提示需要 Tether (http://github.hubspot.com/tether/) bootstrap.js:2772:1
类型错误:验证器未定义
<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 - 单击标有 'Make Enquiry'
的按钮由于您没有向我们展示您的 OP 中的实际代码,我只能评论您 jsFiddle 中的各种问题...
您在
<div>
和<form>
上复制了id="makeEnquiry"
。您不能复制任何id
,并且由于.validate()
方法附加到这个复制的id
,它根本不起作用,因为它使用div
中的第一个实例并忽略来自form
. 的实例
您必须在
rules
和messages
对象中使用name
属性[=14] =] 方法。您的 HTML 标记完全缺少name
属性。当缺少name
属性时,jQuery 验证插件将完全不起作用。您的 jsFiddle 中有一个额外的
});
导致语法错误。您的 jsFiddle 缺少 DOM 就绪事件处理程序。
require_from_group
方法需要包含 theadditional-methods.js
file。您的 jsFiddle 中缺少它。这个插件以前版本的
require_from_group
方法有很多错误。您的 jsFiddle 使用的是 jQuery (1.7) 和 jQuery Validate (1.9),它们都已经有好几年了。更新到最新版本。