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

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:无法读取未定义的属性'settings')但错误是暂时的,并且会在一段时间内消失。

4 个解决方案

#1

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

#2

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

更改表单ID,因为它在表单ID和Div 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.

希望你的任务能够成功。

#3

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,随机数或其他一些不同的字符串。这对我很好地解决了。

#4

Although not the case in OP's question, this error can also be caused by trying to validate an element that is not a form.

虽然在OP的问题中不是这种情况,但是这个错误也可能是由于尝试验证不是表单的元素而引起的。

#1