Robert Limanto Robert Limanto - 5 months ago 39
jQuery Question

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

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.

Answer

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