问题
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 share your knowledge...
<script type="text/javascript">
$(document).ready(function() {
$('#loginform').formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
user_name: {
validators: {
notEmpty: {
message: 'The username is required'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
}
}
}
}
});
});
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Welcome to Aravind Eyecare RFID</title>
<meta name="description" content="description">
<meta name="author" content="Evgeniya">
<meta name="keyword" content="keywords">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="plugins/bootstrapvalidator/bootstrapValidator.min.js"></script>
<script src="plugins/bootstrapvalidator/bootstrapValidator.js"></script>
<script src="plugins/jquery/jquery.validate.min.js"></script>
<script src="plugins/jquery/jquery-2.1.0.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="plugins/bootstrap/bootstrap.min.js"></script>
<script src="plugins/justified-gallery/jquery.justifiedgallery.min.js"></script>
<script src="plugins/tinymce/tinymce.min.js"></script>
<script src="plugins/tinymce/jquery.tinymce.min.js"></script>
<!-- All functions for this theme + document.ready processing -->
<script src="js/devoops.js"></script>
<link href="plugins/bootstrap/bootstrap.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script>
<script src="http://getbootstrap.com/docs-assets/js/respond.min.js"></script>
<![endif]-->
<!-- begin snippet: js hide: false --><body>
<form name="loginform" action="logincheck.jsp" method="post">
<div class="container-fluid">
<div id="page-login" class="row">
<div class="col-xs-12 col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
<div class="box">
<div class="box-content">
<div class="text-center">
<h3 class="page-header">Login</h3>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="user_name" placeholder="Username" />
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-4">
<input type="password" class="form-control" name="password" placeholder="Password" />
</div>
</div>
<div class="text-center">
<div class="col-xs-4">
</div>
<div class="col-xs-4">
</div>
<input type="submit" class="btn btn-primary" value="Sign in">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
回答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.
回答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
<script src="plugins/jquery/jquery-2.1.0.min.js"></script>
<script src="plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="plugins/jquery/jquery.validate.min.js"></script>
<script src="plugins/bootstrapvalidator/bootstrapValidator.js"></script>
If you want to use name change valiation to
$("[name='loginform']").formValidation({
回答3:
I had a similar problem before. It was solved when I did the following. According to me, the problem lies here :
<script src="plugins/bootstrapvalidator/bootstrapValidator.min.js"></script> <script src="plugins/bootstrapvalidator/bootstrapValidator.js"></script>
&
<script src="plugins/jquery/jquery.validate.min.js"></script>
<script src="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.
回答4:
Try change
$('#loginform').formValidation({
to
$('#loginform').bootstrapValidator({
回答5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Student By Admin</title>
<!-- Bootstrap Core CSS -->
<link href="../bower_components/bootstrap-3.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- MetisMenu CSS -->
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="../dist/css/sb-admin-2.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="../errorMessages.css" rel="stylesheet">
<script type="text/javascript" src="../jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="../formValidation.min.js"></script>
<script type="text/javascript" src="../bootstrap1.min.js"></script>
<script>
$(document).ready(function() {
// Generate a simple captcha
function randomNumber(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
function generateCaptcha() {
$('#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 captcha
generateCaptcha();
});
});
</script>
</head>
<body>
<div id="wrapper">
<!-- Navigation -->
<nav class="navbar navbar-default navbar-static-top" role="navigation"
style="margin-bottom: 0">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">Student Management System</a>
</div>
<!-- /.navbar-header -->
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> <i
class="fa fa-envelope fa-fw"></i> <i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-messages">
<li><a href="#">
<div>
<strong>Pradeep</strong> <span class="pull-right text-muted">
<em>Hi...</em>
</span>
</div>
<div>Hi...</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<strong>Pramod</strong> <span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Hello...</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<strong>Nandi</strong> <span class="pull-right text-muted">
<em>Yesterday</em>
</span>
</div>
<div>Hello...</div>
</a></li>
<li class="divider"></li>
<li><a class="text-center" href="#"> <strong>Read
All Messages</strong> <i class="fa fa-angle-right"></i>
</a></li>
</ul> <!-- /.dropdown-messages --></li>
<!-- /.dropdown -->
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> <i class="fa fa-tasks fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-tasks">
<li><a href="#">
<div>
<p>
<strong>Task 1</strong> <span class="pull-right text-muted">40%
Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-success"
role="progressbar" aria-valuenow="40" aria-valuemin="0"
aria-valuemax="100" style="width: 40%">
<span class="sr-only">40% Complete (success)</span>
</div>
</div>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<p>
<strong>Task 2</strong> <span class="pull-right text-muted">20%
Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-info" role="progressbar"
aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
style="width: 20%">
<span class="sr-only">20% Complete</span>
</div>
</div>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<p>
<strong>Task 3</strong> <span class="pull-right text-muted">60%
Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-warning"
role="progressbar" aria-valuenow="60" aria-valuemin="0"
aria-valuemax="100" style="width: 60%">
<span class="sr-only">60% Complete (warning)</span>
</div>
</div>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<p>
<strong>Task 4</strong> <span class="pull-right text-muted">80%
Complete</span>
</p>
<div class="progress progress-striped active">
<div class="progress-bar progress-bar-danger"
role="progressbar" aria-valuenow="80" aria-valuemin="0"
aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
</div>
</a></li>
<li class="divider"></li>
<li><a class="text-center" href="#"> <strong>See
All Tasks</strong> <i class="fa fa-angle-right"></i>
</a></li>
</ul> <!-- /.dropdown-tasks --></li>
<!-- /.dropdown -->
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> <i class="fa fa-bell fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-alerts">
<li><a href="#">
<div>
<i class="fa fa-comment fa-fw"></i> New Comment <span
class="pull-right text-muted small">4 minutes ago</span>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<i class="fa fa-twitter fa-fw"></i> 3 New Followers <span
class="pull-right text-muted small">12 minutes ago</span>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<i class="fa fa-envelope fa-fw"></i> Message Sent <span
class="pull-right text-muted small">4 minutes ago</span>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<i class="fa fa-tasks fa-fw"></i> New Task <span
class="pull-right text-muted small">4 minutes ago</span>
</div>
</a></li>
<li class="divider"></li>
<li><a href="#">
<div>
<i class="fa fa-upload fa-fw"></i> Server Rebooted <span
class="pull-right text-muted small">4 minutes ago</span>
</div>
</a></li>
<li class="divider"></li>
<li><a class="text-center" href="#"> <strong>See All Alerts</strong> <i class="fa fa-angle-right"></i>
</a></li>
</ul> <!-- /.dropdown-alerts --></li>
<!-- /.dropdown -->
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown" href="#"> <i class="fa fa-user fa-fw"></i>
<i class="fa fa-caret-down"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li><a href="#"><i class="fa fa-user fa-fw"></i> User Profile</a></li>
<li><a href="#"><i class="fa fa-gear fa-fw"></i> Settings</a>
</li>
<li class="divider"></li>
<li><a href="LoginPage.jsp"><i class="fa fa-sign-out fa-fw"></i> Logout</a></li>
</ul> <!-- /.dropdown-user --></li>
<!-- /.dropdown -->
</ul>
<!-- /.navbar-top-links -->
<div class="navbar-default sidebar" role="navigation">
<div class="sidebar-nav navbar-collapse">
<ul class="nav" id="side-menu">
<li class="sidebar-search">
<div class="input-group custom-search-form">
<input type="text" class="form-control" placeholder="Search...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div> <!-- /input-group -->
</li>
<li><a href="AdminHomePage.jsp"><i
class="fa fa-dashboard fa-fw"></i>Home page</a></li>
<li><a href="#"><i class="fa fa-files-o fa-fw"></i>Registration<span
class="fa arrow"></span></a>
<ul class="nav nav-second-level">
<li><a href="StudentByAdminPage.jsp">Student</a></li>
<li><a href="ParentByAdminPage.jsp">Parent</a></li>
<li><a href="TeacherByAdminPage.jsp">Teacher</a></li>
</ul> <!-- /.nav-second-level --></li>
</ul>
</div>
<!-- /.sidebar-collapse -->
</div>
<!-- /.navbar-static-side -->
</nav>
<!-- Page Content -->
<div id="page-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Student By Admin</h1>
</div>
<!-- /.col-lg-12 -->
</div>
<!-- /.row -->
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">Student Details</div>
<div class="panel-body">
<form id="contactForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Phone number</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="phoneNumber" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Message</label>
<div class="col-xs-9">
<textarea class="form-control" name="message" rows="7"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label" id="captchaOperation"></label>
<div class="col-xs-3">
<input type="text" class="form-control" name="captcha" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- /.container-fluid -->
</div>
<!-- /#page-wrapper -->
<!-- /#wrapper -->
<!-- jQuery -->
<script type="text/javascript" src="../jquery-2.2.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../bower_components/bootstrap-3.3.6/dist/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
</body>
</html>
来源：https://stackoverflow.com/questions/32065797/jquery-validation-uncaught-type-error-formvalidation-is-not-a-function