Jquery Validation: Uncaught Type Error:$(...) Formvalidation Is Not A Function
I'm getting error Uncaught TypeError:$(..) form Validation is not a function the error comes from a line in the JS code below. How can i fix it?? what should i change??? Please sh
Solution 1:
formValidation() is not a jQuery native function. Maybe you forgot to include another library, or you forgot to paste/write the function in your own js lib.
Solution 2:
First of all you have to give your form an Id
<form id="loginform" action="logincheck.jsp" method="post">
Then try to load jQuery library before bootstrapValidator
<scriptsrc="plugins/jquery/jquery-2.1.0.min.js"></script><scriptsrc="plugins/jquery-ui/jquery-ui.min.js"></script><scriptsrc="plugins/jquery/jquery.validate.min.js"></script><scriptsrc="plugins/bootstrapvalidator/bootstrapValidator.js"></script>If you want to use name change valiation to
$("[name='loginform']").formValidation({
Solution 3:
Try change
$('#loginform').formValidation({
to
$('#loginform').bootstrapValidator({
Solution 4:
I had a similar problem before. It was solved when I did the following. According to me, the problem lies here :
<scriptsrc="plugins/bootstrapvalidator/bootstrapValidator.min.js"></script><scriptsrc="plugins/bootstrapvalidator/bootstrapValidator.js"></script>&
<scriptsrc="plugins/jquery/jquery.validate.min.js"></script><scriptsrc="plugins/jquery/jquery-2.1.0.min.js"></script>You have included bootstrapValidator.min.js & also bootstrapValidator.js. Try removing one and you should be able to run your code. You can have class "A" only once per document. bootstrapValidator.min.js & bootstrapValidator.js contain the same code.
bootstrapValidator.js is neat looking code. It has proper indentation and spacing.
.min.js has all spaces & comments removed from it. It helps to load webpage faster & is smaller in size.
Just to point out as well, you are better using the minified version (.min) for your live environment as Google are now checking on page loading times. Having all your JS file minified means they will load faster and will score you more brownie points.
Edit 1 -
I also realized that there is a preference order that NEEDS to be followed. For eg : If you want a drop down with Bootstrap , you will need to include Bootstrap before JQuery. The reason for it is both of them are interdependable & JQuery is used inside the Bootstrap.JS If you load bootstrap first, it may finish before the call is actually made to the bootstrap code, but before jquery finishes loading, hence the missing reference.
Hence, also ensure that your JS libraries are not interdependent. If they are, find out the preference order.
Solution 5:
<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width, initial-scale=1"><metaname="description"content=""><metaname="author"content=""><title>Student By Admin</title><!-- Bootstrap Core CSS --><linkhref="../bower_components/bootstrap-3.3.6/dist/css/bootstrap.min.css"rel="stylesheet"><!-- MetisMenu CSS --><linkhref="../bower_components/metisMenu/dist/metisMenu.min.css"rel="stylesheet"><!-- Custom CSS --><linkhref="../dist/css/sb-admin-2.css"rel="stylesheet"><!-- Custom Fonts --><linkhref="../bower_components/font-awesome/css/font-awesome.min.css"rel="stylesheet"type="text/css"><linkhref="../errorMessages.css"rel="stylesheet"><scripttype="text/javascript"src="../jquery-2.2.3.min.js"></script><scripttype="text/javascript"src="../formValidation.min.js"></script><scripttype="text/javascript"src="../bootstrap1.min.js"></script><script>
$(document).ready(function() {
// Generate a simple captchafunctionrandomNumber(min, max) {
returnMath.floor(Math.random() * (max - min + 1) + min);
}
functiongenerateCaptcha() {
$('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
}
generateCaptcha();
$('#contactForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
phoneNumber: {
validators: {
notEmpty: {
message: 'The phone number is required'
},
regexp: {
message: 'The phone number can only contain the digits, spaces, -, (, ), + and .',
regexp: /^[0-9\s\-()+\.]+$/
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
message: {
validators: {
notEmpty: {
message: 'The message is required'
},
stringLength: {
max: 700,
message: 'The message must be less than 700 characters long'
}
}
},
captcha: {
validators: {
callback: {
message: 'Wrong answer',
callback: function(value, validator, $field) {
var items = $('#captchaOperation').html().split(' '),
sum = parseInt(items[0]) + parseInt(items[2]);
return value == sum;
}
}
}
}
}
})
.on('err.form.fv', function(e) {
// Regenerate the captchagenerateCaptcha();
});
});
</script></head><body><divid="wrapper"><!-- Navigation --><navclass="navbar navbar-default navbar-static-top"role="navigation"style="margin-bottom: 0"><divclass="navbar-header"><buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse"><spanclass="sr-only">Toggle navigation</span><spanclass="icon-bar"></span><spanclass="icon-bar"></span><spanclass="icon-bar"></span></button><aclass="navbar-brand"href="index.html">Student Management System</a></div><!-- /.navbar-header --><ulclass="nav navbar-top-links navbar-right"><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"><iclass="fa fa-envelope fa-fw"></i><iclass="fa fa-caret-down"></i></a><ulclass="dropdown-menu dropdown-messages"><li><ahref="#"><div><strong>Pradeep</strong><spanclass="pull-right text-muted"><em>Hi...</em></span></div><div>Hi...</div></a></li><liclass="divider"></li><li><ahref="#"><div><strong>Pramod</strong><spanclass="pull-right text-muted"><em>Yesterday</em></span></div><div>Hello...</div></a></li><liclass="divider"></li><li><ahref="#"><div><strong>Nandi</strong><spanclass="pull-right text-muted"><em>Yesterday</em></span></div><div>Hello...</div></a></li><liclass="divider"></li><li><aclass="text-center"href="#"><strong>Read
All Messages</strong><iclass="fa fa-angle-right"></i></a></li></ul><!-- /.dropdown-messages --></li><!-- /.dropdown --><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"><iclass="fa fa-tasks fa-fw"></i><iclass="fa fa-caret-down"></i></a><ulclass="dropdown-menu dropdown-tasks"><li><ahref="#"><div><p><strong>Task 1</strong><spanclass="pull-right text-muted">40%
Complete</span></p><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-success"role="progressbar"aria-valuenow="40"aria-valuemin="0"aria-valuemax="100"style="width: 40%"><spanclass="sr-only">40% Complete (success)</span></div></div></div></a></li><liclass="divider"></li><li><ahref="#"><div><p><strong>Task 2</strong><spanclass="pull-right text-muted">20%
Complete</span></p><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-info"role="progressbar"aria-valuenow="20"aria-valuemin="0"aria-valuemax="100"style="width: 20%"><spanclass="sr-only">20% Complete</span></div></div></div></a></li><liclass="divider"></li><li><ahref="#"><div><p><strong>Task 3</strong><spanclass="pull-right text-muted">60%
Complete</span></p><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-warning"role="progressbar"aria-valuenow="60"aria-valuemin="0"aria-valuemax="100"style="width: 60%"><spanclass="sr-only">60% Complete (warning)</span></div></div></div></a></li><liclass="divider"></li><li><ahref="#"><div><p><strong>Task 4</strong><spanclass="pull-right text-muted">80%
Complete</span></p><divclass="progress progress-striped active"><divclass="progress-bar progress-bar-danger"role="progressbar"aria-valuenow="80"aria-valuemin="0"aria-valuemax="100"style="width: 80%"><spanclass="sr-only">80% Complete (danger)</span></div></div></div></a></li><liclass="divider"></li><li><aclass="text-center"href="#"><strong>See
All Tasks</strong><iclass="fa fa-angle-right"></i></a></li></ul><!-- /.dropdown-tasks --></li><!-- /.dropdown --><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"><iclass="fa fa-bell fa-fw"></i><iclass="fa fa-caret-down"></i></a><ulclass="dropdown-menu dropdown-alerts"><li><ahref="#"><div><iclass="fa fa-comment fa-fw"></i> New Comment <spanclass="pull-right text-muted small">4 minutes ago</span></div></a></li><liclass="divider"></li><li><ahref="#"><div><iclass="fa fa-twitter fa-fw"></i> 3 New Followers <spanclass="pull-right text-muted small">12 minutes ago</span></div></a></li><liclass="divider"></li><li><ahref="#"><div><iclass="fa fa-envelope fa-fw"></i> Message Sent <spanclass="pull-right text-muted small">4 minutes ago</span></div></a></li><liclass="divider"></li><li><ahref="#"><div><iclass="fa fa-tasks fa-fw"></i> New Task <spanclass="pull-right text-muted small">4 minutes ago</span></div></a></li><liclass="divider"></li><li><ahref="#"><div><iclass="fa fa-upload fa-fw"></i> Server Rebooted <spanclass="pull-right text-muted small">4 minutes ago</span></div></a></li><liclass="divider"></li><li><aclass="text-center"href="#"><strong>See All Alerts</strong><iclass="fa fa-angle-right"></i></a></li></ul><!-- /.dropdown-alerts --></li><!-- /.dropdown --><liclass="dropdown"><aclass="dropdown-toggle"data-toggle="dropdown"href="#"><iclass="fa fa-user fa-fw"></i><iclass="fa fa-caret-down"></i></a><ulclass="dropdown-menu dropdown-user"><li><ahref="#"><iclass="fa fa-user fa-fw"></i> User Profile</a></li><li><ahref="#"><iclass="fa fa-gear fa-fw"></i> Settings</a></li><liclass="divider"></li><li><ahref="LoginPage.jsp"><iclass="fa fa-sign-out fa-fw"></i> Logout</a></li></ul><!-- /.dropdown-user --></li><!-- /.dropdown --></ul><!-- /.navbar-top-links --><divclass="navbar-default sidebar"role="navigation"><divclass="sidebar-nav navbar-collapse"><ulclass="nav"id="side-menu"><liclass="sidebar-search"><divclass="input-group custom-search-form"><inputtype="text"class="form-control"placeholder="Search..."><spanclass="input-group-btn"><buttonclass="btn btn-default"type="button"><iclass="fa fa-search"></i></button></span></div><!-- /input-group --></li><li><ahref="AdminHomePage.jsp"><iclass="fa fa-dashboard fa-fw"></i>Home page</a></li><li><ahref="#"><iclass="fa fa-files-o fa-fw"></i>Registration<spanclass="fa arrow"></span></a><ulclass="nav nav-second-level"><li><ahref="StudentByAdminPage.jsp">Student</a></li><li><ahref="ParentByAdminPage.jsp">Parent</a></li><li><ahref="TeacherByAdminPage.jsp">Teacher</a></li></ul><!-- /.nav-second-level --></li></ul></div><!-- /.sidebar-collapse --></div><!-- /.navbar-static-side --></nav><!-- Page Content --><divid="page-wrapper"><divclass="container-fluid"><divclass="row"><divclass="col-lg-12"><h1class="page-header">Student By Admin</h1></div><!-- /.col-lg-12 --></div><!-- /.row --></div><divclass="row"><divclass="col-lg-12"><divclass="panel panel-default"><divclass="panel-heading">Student Details</div><divclass="panel-body"><formid="contactForm"class="form-horizontal"><divclass="form-group"><labelclass="col-xs-3 control-label">Full name</label><divclass="col-xs-4"><inputtype="text"class="form-control"name="firstName"placeholder="First name" /></div><divclass="col-xs-4"><inputtype="text"class="form-control"name="lastName"placeholder="Last name" /></div></div><divclass="form-group"><labelclass="col-xs-3 control-label">Phone number</label><divclass="col-xs-5"><inputtype="text"class="form-control"name="phoneNumber" /></div></div><divclass="form-group"><labelclass="col-xs-3 control-label">Email address</label><divclass="col-xs-5"><inputtype="text"class="form-control"name="email" /></div></div><divclass="form-group"><labelclass="col-xs-3 control-label">Message</label><divclass="col-xs-9"><textareaclass="form-control"name="message"rows="7"></textarea></div></div><divclass="form-group"><labelclass="col-xs-3 control-label"id="captchaOperation"></label><divclass="col-xs-3"><inputtype="text"class="form-control"name="captcha" /></div></div><divclass="form-group"><divclass="col-xs-9 col-xs-offset-3"><buttontype="submit"class="btn btn-primary">Submit</button></div></div></form></div></div></div></div><!-- /.container-fluid --></div><!-- /#page-wrapper --><!-- /#wrapper --><!-- jQuery --><scripttype="text/javascript"src="../jquery-2.2.3.min.js"></script><!-- Bootstrap Core JavaScript --><scriptsrc="../bower_components/bootstrap-3.3.6/dist/js/bootstrap.min.js"></script><!-- Metis Menu Plugin JavaScript --><scriptsrc="../bower_components/metisMenu/dist/metisMenu.min.js"></script><!-- Custom Theme JavaScript --><scriptsrc="../dist/js/sb-admin-2.js"></script></body></html>
Post a Comment for "Jquery Validation: Uncaught Type Error:$(...) Formvalidation Is Not A Function"