单击提交按钮时无法读取未定义的属性“设置”
Posted
技术标签:
【中文标题】单击提交按钮时无法读取未定义的属性“设置”【英文标题】：Cannot read property 'settings' of undefined when I click submit button 【发布时间】：2015-12-17 17:43:33 【问题描述】：我不知道为什么当我将代码更改为 php（来自 html）时收到此错误。当文件的扩展名是html时，代码工作正常。
<?php?>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="css/manual.css">
<!-- Optional theme -->
<!-- Latest compiled and minified javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
<title>Register</title>
</head>
<body>
<nav class="navbar navbar-default" id="navBar">
</nav>
<div class="full">
<div class="col-xs-12">
<!--Side Bar-->
<div class="col-xs-3" id="navSide">
</div>
<div class="col-xs-6" id="signUpForm">
<h1>Register Page</h1>
<form role="form" id="signUpForm">
<div class="form-group">
<div class="form-inline spacer-12">
<input type="text" class="form-control" name="userFirstname" placeholder="First Name">
<input type="text" class="form-control" name="userLastName" placeholder="Last Name">
</div>
</div>
<div class="form-group ">
<input type="text" class="form-control"
name="userEmail"
placeholder="Email">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="userPassword" placeholder="Password">
</div>
<div class="form-group ">
<input type="password" class="form-control" name="confirmPassword" placeholder="Password">
</div>
<div class="form-group ">
<label> Birthday* </label>
<input type="date" class="form-control" name="userBirthday" placeholder="Birthday">
</div>
<input type="submit" class="btn btn-info spacer-12" style="clear:both" >
</form>
</div>
</div>
</div>
<script src="js/startup.js"></script>
<script src="js/signup.js"></script>
</body>
</html>
<?php?>
那么这是我的 jquery 验证码
$(document).ready(function()
$('#signUpForm').validate(
errorElement: "span",
errorClass: "help-block",
rules:
userFirstName:
required: true
,
userLastName:
required: true
,
userEmail:
required: true
,
userPassword:
required: true
,
confirmPassword:
required: true
,
userBirthday:
required: true
,
submitHandler: function (form) // for demo
alert('valid form submitted'); // for demo
return false; // for demo
,
highlight: function(element)
$(element).closest('.form-group').addClass('has-error').addClass('red-border');
,
unhighlight: function(element)
$(element).closest('.form-group').removeClass('has-error').addClass('has-success').removeClass('red-border');
);
);
当我单击提交按钮时，此代码会导致错误（JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined ） 但错误是暂时的，过段时间就会消失。
【问题讨论】：
点击有错误的按钮和点击没有错误之间有什么变化？这样的错误不会简单地“消失”。此外，在从 HTML 更改为 PHP 时，您尝试发现哪些差异（无论这意味着什么）？标记是否仍然相同，就像完全一样？ 【参考方案1】：您定义了两个同名的 id，而 id 应该是唯一的。
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
尝试从<div class="col-xs-6" id="signUpForm">中删除id
【讨论】：
多么愚蠢的错误，你如何检查是否有 2 个 id 在同一个表单中？ 像这样使用id选择器console.log($('[id="signUpForm"]').length);
好的，谢谢norli..我很快就会接受你的回答，如果我们需要一个一个检查所有的id还是很难哈哈
是的，避免定义相同的 id，而是使用类。不客气，伙计。
查看此答案以查找所有重复的 id ***.com/a/509965/989451【参考方案2】：
如果使用 rules() 方法，请务必先初始化验证。
var validator = $("#Form1").validate();
$('#field1').rules("add",
min: 1
);
【讨论】：
以上回复是专门针对jQuery验证器插件的。它也完美地回答了我的问题，所以谢谢迈克尔 jquery 的初始化验证我的表单是错误的，您的回答对于理解我的问题至关重要。【参考方案3】：此错误通常是由于尝试验证不是表单的元素而引起的。在 OP 的情况下，有两个元素具有相同的 ID：
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
jQuery从上到下搜索页面，找到的第一个带有这个ID的元素不是表单。
如果尝试验证表单外的元素，Validator.element() 函数（用于验证单个元素）也会导致此错误。
【讨论】：
这似乎更像是评论而不是问题的答案 这是我的解决方案。我试图验证一个不存在的表单。解决它在表单上添加一个 id 来验证。$("#form_id").validate(...)【参考方案4】：
注意两件事
1.定义Jquery函数
包含jQuery的功能！
(function( $ )
//启动脚本
//endscript/
)( jQuery );
-
更改 Form Id，因为它在 Form Id 和 Div Id 之间发生冲突
<form role="form" id="signUpForm1"> // include 1 in previous form id
并将这个 id 放入脚本中
$('#signUpForm1').validate( // put the Id in the script
希望你的任务会成功。
【讨论】：
【参考方案5】：在这里添加一个小细节，我在使用 jQuery UI 时间选择器时遇到了同样的问题，这也是由于 id 不唯一。
在我的情况下，这是因为我从模板中获取父元素 - 将其复制为弹出窗口。结果，窗口的内容都有重复的id。
我的正常解决方法是替换它：
$('#foo').bar();
用这个：
myPopupWindow.find('#foo').bar();
这对大多数事情都很有效，但不适用于时间选择器。对于那个，我最终这样做了：
myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag);
myPopupWindow.find('#foo_' + someUniqueTag).timepicker();
其中 someUniqueTag 是记录 ID、随机数或其他一些不同的字符串。这对我来说解决得很好。
【讨论】：
以上是关于单击提交按钮时无法读取未定义的属性“设置”的主要内容，如果未能解决你的问题，请参考以下文章