Geek Answers Handbook

Unable to read undefined property settings when click submit

I don't know why I got this error when I changed the code to php (from html). when the file extension is html, the code works 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 an error when I press the submit button (JQuery Validate Uncaught TypeError: Unable to read property settings undefined) But the error is temporary and will disappear after a while.

+15
javascript jquery html php
source share
5 answers

You have identified two identifiers with the same name, while the identifier must be unique.

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

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

+30
source share

Although this does not apply to the OP question, this error can also be caused by an attempt to validate an element that is not a form.

+3
source share

NOTE two things

1. Define a jQuery function

enable jQuery function!

 (function( $ ) {

// Run Script

// endscript /

 })( jQuery );
  1. Change the form id because it conflicts with the form id and div id

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

And put this id in Script

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

We hope that your task will be successful.

+2
source share

To add a little detail here, I ran into the same issue with jQuery UI time picker, and this was also due to the fact that the identifier is not unique.

In my case, this is because I grabbed the parent element from the template - duplicated it for the popup. As a result, the contents of the window had duplicate identifiers.

My usual workaround for this was to replace this:

 $('#foo').bar();

with this:

 myPopupWindow.find('#foo').bar();

This works very well for most things, but not for timing. For this, I did this:

 myPopupWindow.find('#foo').attr('id', 'foo_' + someUniqueTag); myPopupWindow.find('#foo_' + someUniqueTag).timepicker();

where someUniqueTag is an identifier for a record, a random number, or some other single line. It is very convenient for me.

+2
source share

If you use the rules () method, be sure to initialize the check first.

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

More articles:


All Articles