jQuery验证:未捕获类型错误:$(..)formValidation不是一个函数

jQuery validation: Uncaught type error:$(...) formValidation is not a function

本文关键字：formValidation 函数 一个 验证 错误 类型 jQuery      更新时间：2023-09-26

我得到错误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">
                                        &nbsp;
                                    </div>
                                    <div class="col-xs-4">
                                        &nbsp;
                                    </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">
                                        &nbsp;
                                    </div>
                                    <div class="col-xs-4">
                                        &nbsp;
                                    </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-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>
相关文章：