单击提交按钮时无法读取未定义的属性“设置”答案

【问题标题】：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 时，您尝试发现哪些差异（无论这意味着什么）？标记是否仍然相同，就像完全一样？

标签： javascript php jquery html

【解决方案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 stackoverflow.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、随机数或其他一些不同的字符串。这对我来说解决得很好。

【讨论】：