Cannot read property 'settings' of undefined when I click submit button

Question

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 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

$(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.

What changes between clicking the button with an error, and clicking it without? Such errors won't simply "vanish". Additionally, what have you tried to spot differences when changing from HTML to PHP (whatever that means)? Is the markup still the same, like **exactly** the same? — Nico Haase, Jan 28 '20 at 13:34

Norlihazmey Ghazali · Accepted Answer · 2015-09-21T05:57:14.350

39

You defined two ids with same name, whereas id should be unique.

<div class="col-xs-6" id="signUpForm">
<form role="form" id="signUpForm">

Try to remove id from <div class="col-xs-6" id="signUpForm">

edited Sep 21 '15 at 05:57

answered Sep 21 '15 at 05:55

Norlihazmey Ghazali

9,000
1
23
40

1

what a stupid mistake, how do u check if there are 2 ids in the same form? – Robert Limanto Sep 21 '15 at 05:57
1

using `id` selector like so `console.log($('[id="signUpForm"]').length);` – Norlihazmey Ghazali Sep 21 '15 at 06:00
okay thanks norli..i will accept ur answer soon, it is still hard if we need to check all the ids one by one haha – Robert Limanto Sep 21 '15 at 06:00
Yeah, avoid to define same id, instead use class for that. And you're welcome mate. – Norlihazmey Ghazali Sep 21 '15 at 06:01
1

See this answer to find all duplicate ids https://stackoverflow.com/a/509965/989451 – Jeroen K Sep 05 '17 at 11:55
Theres actually a plugin in chrome for this called Dup-ID – zekkai Jul 23 '18 at 07:51

score 23 · Answer 2 · answered Jul 05 '19 at 22:06

23

If you use the rules() method, make sure to initialize the validation first.

var validator = $("#Form1").validate();
$('#field1').rules("add", {
         min: 1
});

answered Jul 05 '19 at 22:06

Michael

2,825
3
24
30

1

The above reply is specifically for the jQuery validator plugin. It also perfectly answered my query, so thank you Michael – Simon Brown Mar 03 '20 at 18:23
1

The initialization of jquery validate my form was wrong and your answer was essential to understand my problem. – alex Jul 28 '21 at 19:23
1

This solved the issue I had "Cannot read properties of undefined (reading 'settings')." Spent a while trying to figure this one out. Kudos. – Joshua Poling Dec 10 '22 at 18:19

user5493187 · Answer 3 · 2020-01-28T13:29:41.623

6

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:

<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.

The Validator.element() function (for validating single elements) can also cause this error, if attempting to validate an element that is outside the form.

edited Jan 28 '20 at 13:29

answered Sep 13 '18 at 15:25

user5493187

212
5
16

This seems like more of a comment than an answer to the question – chevybow Sep 13 '18 at 15:49
1

This was the solution for me.I tried to validate a form that not exists. Solve it adding a id on form to validate. `$("#form_id").validate({...})` – Elvis Technologies Dec 27 '18 at 18:56

score 2 · Answer 4 · answered Sep 21 '15 at 06:18

NOTE two things

1. Define the Jquery function

include the function of jQuery !

(function( $ ) {

//Start Script

//endscript/

})( jQuery );

Change the Form Id because it's doing conflict between Form Id and Div Id

<form role="form" id="signUpForm1"> // include 1 in previous form id

And put this id into script

  $('#signUpForm1').validate({ // put the Id in the script

Hope Your Task will be successful.

score 2 · Answer 5 · answered Sep 28 '16 at 16:18

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.

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.

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.

Cannot read property 'settings' of undefined when I click submit button

5 Answers5

Linked