我得到错误Uncaught TypeError:$(..)表单验证不是一个函数，错误来自下面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库中粘贴/编写函数。
首先你要给你的表单一个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>
如果您想对
使用名称更改验证$("[name='loginform']").formValidation({
尝试改变
$('#loginform').formValidation({
$('#loginform').bootstrapValidator({
我以前也遇到过类似的问题。我做了下面的事情就解决了。在我看来，问题出在这里:
<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)，因为谷歌现在会检查页面加载时间。把你所有的JS文件都缩小意味着它们会加载得更快，会给你更多的加分。
Edit 1 -
我还意识到需要遵循一个优先顺序。例如:如果你想要一个带有Bootstrap的下拉菜单，你需要在JQuery之前包含Bootstrap。原因是他们俩都是相互依赖的。JQuery是在bootstrap . js中使用的，如果你先加载bootstrap，它可能会在调用bootstrap代码之前完成，但在JQuery完成加载之前，因此缺少引用。
因此，还要确保你的JS库不是相互依赖的。如果是，请找出首选顺序。
<!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-9s-()+.]+$/
}
}
},
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>