Javascript 单击提交按钮时无法读取未定义的属性“设置”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32688197/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot read property 'settings' of undefined when i click submit button
提问by Robert Limanto
I don't know why i received this error when i changed the code to php (from html). when the extension of the file is html, the code is working fine
当我将代码更改为 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?>
then this is my jquery validation code
那么这是我的 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');
}
});
});
This code causes error when i click the submit button (JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined ) But the error is temporary and will vanish in a while.
当我单击提交按钮时，此代码会导致错误（JQuery Validate Uncaught TypeError: Cannot read property 'settings' of undefined ）但该错误是暂时的，将在一段时间内消失。
回答by Norlihazmey Ghazali
You defined two ids with same name, whereas id should be unique.
您定义了两个具有相同名称的 id，而 id 应该是唯一的。
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
Try to remove id from <div class="col-xs-6" id="signUpForm">
尝试从中删除 id <div class="col-xs-6" id="signUpForm">
回答by Michael
If you use the rules() method, make sure to initialize the validation first.
如果您使用 rules() 方法，请确保首先初始化验证。
var validator = $("#Form1").validate();
$('#field1').rules("add", {
min: 1
});
回答by user5493187
This error is normally caused by trying to validate an element that is not a form. In the OP's case, there are two elements with the same ID:
此错误通常是由尝试验证不是表单的元素引起的。在 OP 的情况下，有两个元素具有相同的 ID：
<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">
jQuery searches a page from top to bottom, and the first element it finds with this ID is not a form.
jQuery 从上到下搜索页面，它找到的第一个具有此 ID 的元素不是表单。
The Validator.element()function (for validating single elements) can also cause this error, if attempting to validate an element that is outside the form.
所述Validator.element（）函数（用于验证单个要素）也可引起该错误，如果尝试验证即外形式的元件。
回答by CodeLove
NOTE two things
注意两件事
1. Define the Jquery function
1.定义Jquery函数
include the function of jQuery !
包括jQuery的功能！
(function( $ ) {
//Start Script
//启动脚本
//endscript/
//结束脚本/
})( jQuery );
- Change the Form Id because it's doing conflict between Form Id and Div Id
- 更改 Form Id 因为它在 Form Id 和 Div Id 之间发生冲突
<form role="form" id="signUpForm1"> // include 1 in previous form id
<form role="form" id="signUpForm1"> // include 1 in previous form id
And put this id into script
并将此 ID 放入脚本中
$('#signUpForm1').validate({ // put the Id in the script
Hope Your Task will be successful.
希望你的任务会成功。
回答by Jacob Ewing
To add a small detail here, I ran into the same problem with jQuery UI time picker, and it also was due to the id being non-unique.
在这里添加一个小细节，我在使用 jQuery UI 时间选择器时遇到了同样的问题，这也是由于 id 不唯一。
In my case, it's because I was grabbing the parent element from a template - duplicating it for a pop-up window. As a result, the contents of the window all had duplicate ids.
就我而言，这是因为我从模板中获取父元素 - 为弹出窗口复制它。结果，窗口的内容都有重复的 id。
My normal workaround for that was to replace this:
我的正常解决方法是替换它：
$('#foo').bar();
with this:
有了这个：
myPopupWindow.find('#foo').bar();
That works quite well for most things, but not for the time picker. For that one, I wound up doing this:
这对于大多数事情都非常有效，但对于时间选择器则不然。对于那个，我最终这样做了：
myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag);
myPopupWindow.find('#foo_' + someUniqueTag).timepicker();
where someUniqueTag is a record id, random number or some other distinct string. This solved it quite nicely for me.
其中 someUniqueTag 是记录 ID、随机数或其他一些不同的字符串。这对我来说很好地解决了它。
