javascript - Cannot read property 'settings' of undefined when i click submit button -
i don't know why i received error when changed code php (from html). when extension of file html, code 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 , 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 , minified javascript --> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <!-- latest compiled , 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 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) { // demo alert('valid form submitted'); // demo return false; // 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 click submit button (jquery validate uncaught typeerror: cannot read property 'settings' of undefined ) error temporary , vanish in while.
you defined 2 ids same name, whereas id should unique.
<div class="col-xs-6" id="signupform"> <form role="form" id="signupform"> try remove id <div class="col-xs-6" id="signupform">
Comments
Post a Comment