javascript jQuery 验证：未捕获的类型错误：$(...) formValidation 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32065797/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-28 14:48:20 来源:igfitidea点击:
jQuery validation: Uncaught type error:$(...) formValidation is not a function
提问by Pari Venthan
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...
我收到错误 Uncaught TypeError:$(..) form Validation is not a function 该错误来自下面 JS 代码中的一行。我该怎么修？？我应该改变什么？？？请分享你的知识...
<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>
回答by Fabian Picone
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.
formValidation() 不是 jQuery 原生函数。也许您忘记包含另一个库，或者您忘记在您自己的 js 库中粘贴/编写该函数。
回答by Abdul Hadi
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
如果您想使用名称更改验证
$("[name='loginform']").formValidation({
回答by Giridhar Gada
<!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>
回答by Aditya Behere
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.min.js 和 bootstrapValidator.js。尝试删除一个，您应该能够运行您的代码。每个文档只能有一次“A”类。bootstrapValidator.min.js 和 bootstrapValidator.js 包含相同的代码。
bootstrapValidator.js is neat looking code. It has proper indentation and spacing.
bootstrapValidator.js 是整洁的代码。它有适当的缩进和间距。
.min.js has all spaces & comments removed from it. It helps to load webpage faster & is smaller in size.
.min.js 删除了所有空格和注释。它有助于更快地加载网页并且尺寸更小。
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.
还要指出的是，您最好将缩小版本 (.min) 用于您的实时环境，因为 Google 现在正在检查页面加载时间。缩小所有 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. 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 下拉，则需要在 JQuery 之前包含 Bootstrap。原因是它们是相互依赖的，并且在 Bootstrap.JS 中使用了 JQuery 如果您首先加载引导程序，它可能会在实际调用引导程序代码之前完成，但在 jquery 完成加载之前，因此缺少引用。
Hence, also ensure that your JS libraries are not interdependent. If they are, find out the preference order.
因此，还要确保您的 JS 库不是相互依赖的。如果是，请找出优先顺序。
回答by Guest
Try change
尝试改变
$('#loginform').formValidation({
to
到
$('#loginform').bootstrapValidator({
