jQuery验证：未捕获类型错误：$（...）formValidation不是函数
[英]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. 
我收到错误Uncaught TypeError：$（..）form Validation不是一个函数，错误来自下面JS代码中的一行。 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>
5 个解决方案
解决方案1
2 2015-08-18 07:11:36
formValidation() is not a jQuery native function. formValidation（）不是jQuery本机函数。 Maybe you forgot to include another library, or you forgot to paste/write the function in your own js lib. 也许您忘了包含另一个库，或者您忘记在自己的js lib中粘贴/编写该函数。
解决方案2
2 2015-12-06 17:26:32
First of all you have to give your form an Id 首先，你必须给你的表单一个Id
<form id="loginform" action="logincheck.jsp" method="post">
Then try to load jQuery library before bootstrapValidator 然后尝试在bootstrapValidator之前加载jQuery库
<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 如果要使用名称更改valiation
$("[name='loginform']").formValidation({
解决方案3
0 2015-08-18 07:27:49
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. 您已经包含了bootstrapValidator.min.js以及bootstrapValidator.js。 Try removing one and you should be able to run your code. 尝试删除一个，你应该能够运行你的代码。 You can have class "A" only once per document. 每个文档只能有一个“A”类。 bootstrapValidator.min.js & bootstrapValidator.js contain the same code. bootstrapValidator.min.js和bootstrapValidator.js包含相同的代码。
bootstrapValidator.js is neat looking code. bootstrapValidator.js看起来很整洁。 It has proper indentation and spacing. 它有适当的压痕和间距。
.min.js has all spaces & comments removed from it. .min.js已删除所有空格和注释。 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. 还要指出的是，您最好在您的实时环境中使用缩小版本（.min），因为Google现在正在检查页面加载时间。 Having all your JS file minified means they will load faster and will score you more brownie points. 将所有JS文件缩小意味着它们将加载更快并且将为您获得更多的布朗尼点数。
Edit 1 - 编辑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. 例如：如果你想使用Bootstrap下拉，你需要在JQuery之前包含Bootstrap。 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. 原因是它们都是可依赖的并且在Bootstrap.JS中使用了JQuery如果首先加载bootstrap，它可能在实际调用bootstrap代码之前完成，但是在jquery完成加载之前，因此缺少引用。
Hence, also ensure that your JS libraries are not interdependent. 因此，还要确保您的JS库不是相互依赖的。 If they are, find out the preference order. 如果是，请找出偏好顺序。
解决方案4
0 2015-12-06 16:53:24
Try change 尝试改变
$('#loginform').formValidation({
to 至
$('#loginform').bootstrapValidator({
解决方案5
0 2016-06-27 07:27:28
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
未捕获的TypeError：$（…）.formValidation不是函数JQUERY验证 - Uncaught TypeError: $(…).formValidation is not a function JQUERY validation
jQuery-未捕获的类型错误：字符串不是函数 - jQuery - Uncaught Type Error: string is not a function
未捕获的类型错误jQuery - Uncaught type error jquery
未捕获的类型错误...不是函数 - uncaught type error… is not a function
未捕获的类型错误：不是函数 - Uncaught Type error: is not a function
具有Select2的FormValidation未捕获的异常：未为Select2定义查询函数 - FormValidation with Select2 uncaught exception: query function not defined for Select2
.formValidation不是一个函数 - .formValidation is not a function
jQuery Flexslider 未捕获的类型错误 - Uncaught type Error by jQuery Flexslider
未捕获的类型错误-jQuery-WordPress - Uncaught Type Error - jQuery - WordPress
jQuery ajax 未捕获的类型错误 - jQuery ajax uncaught type error
相关标签