4

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">

                                        &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>
4

5 に答える 5

2

formValidation() は jQuery ネイティブ関数ではありません。別のライブラリを含めるのを忘れたか、独自の js ライブラリに関数を貼り付け/書き込むのを忘れた可能性があります。

于 2015-08-18T07:11:36.633 に答える
2

まず、フォームに 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({
于 2015-12-06T17:26:32.320 に答える
1

変更してみる 

$('#loginform').formValidation({

に

$('#loginform').bootstrapValidator({
于 2015-12-06T16:53:24.760 に答える
0

以前も同様の問題がありました。以下を実行したら解決しました。私によると、問題はここにあります：

<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」は、ドキュメントごとに 1 回だけ指定できます。bootstrapValidator.min.js と bootstrapValidator.js には同じコードが含まれています。

bootstrapValidator.js は見栄えの良いコードです。適切なインデントと間隔があります。

.min.js には、すべてのスペースとコメントが削除されています。ウェブページの読み込みが速くなり、サイズが小さくなります。

また、Google がページの読み込み時間をチェックしているため、ライブ環境には縮小版 (.min) を使用することをお勧めします。すべての JS ファイルを縮小すると、読み込みが速くなり、ブラウニー ポイントが増えます。

編集 1 -

また、従わなければならない優先順位があることにも気付きました。例: Bootstrap でドロップダウンが必要な場合は、JQuery の前に Bootstrap を含める必要があります。その理由は、両方が相互に依存しており、JQuery が Bootstrap.JS 内で使用されているためです。最初にブートストラップをロードすると、ブートストラップ コードへの呼び出しが実際に行われる前に終了する可能性がありますが、jquery がロードを終了する前に参照が失われます。

したがって、JS ライブラリが相互に依存していないことも確認してください。もしそうなら、優先順位を見つけてください。

于 2015-08-18T07:27:49.317 に答える
0 
<!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>
于 2016-06-27T07:27:28.440 に答える