[英]jQuery validation: Uncaught type error:$(…) formValidation is not a function
我收到錯誤Uncaught TypeError：$（..）form Validation不是一個函數，錯誤來自下面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>
formValidation（）不是jQuery本機函數。 也許您忘了包含另一個庫，或者您忘記在自己的js lib中粘貼/編寫該函數。
首先，你必須給你的表單一個Id
<form id="loginform" action="logincheck.jsp" method="post">
然后嘗試在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>
如果要使用名稱更改valiation
$("[name='loginform']").formValidation({
我之前遇到過類似的問題。 當我做了以下事情時，它就解決了。 據我說，問題出在這里：
<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>
您已經包含了bootstrapValidator.min.js以及bootstrapValidator.js。 嘗試刪除一個，你應該能夠運行你的代碼。 每個文檔只能有一個“A”類。 bootstrapValidator.min.js和bootstrapValidator.js包含相同的代碼。
bootstrapValidator.js看起來很整潔。 它有適當的壓痕和間距。
.min.js已刪除所有空格和注釋。 它有助於加快網頁加載並縮小尺寸。
還要指出的是，您最好在您的實時環境中使用縮小版本（.min），因為Google現在正在檢查頁面加載時間。 將所有JS文件縮小意味着它們將加載更快並且將為您獲得更多的布朗尼點數。
編輯1 -
我也意識到有一個需要遵循的偏好順序。 例如：如果你想使用Bootstrap下拉，你需要在JQuery之前包含Bootstrap。 原因是它們都是可依賴的並且在Bootstrap.JS中使用了JQuery如果首先加載bootstrap，它可能在實際調用bootstrap代碼之前完成，但是在jquery完成加載之前，因此缺少引用。
因此，還要確保您的JS庫不是相互依賴的。 如果是，請找出偏好順序。
嘗試改變
$('#loginform').formValidation({
至
$('#loginform').bootstrapValidator({
<!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>
未捕獲的TypeError：$（…）.formValidation不是函數JQUERY驗證
[英]Uncaught TypeError: $(…).formValidation is not a function JQUERY validation
具有Select2的FormValidation未捕獲的異常：未為Select2定義查詢函數
[英]FormValidation with Select2 uncaught exception: query function not defined for Select2
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.