2015-08-18 2 views
4

Я получаю сообщение об ошибке Uncaught TypeError: $ (..) form Проверка не является функцией, ошибка возникает из строки в 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"> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <title>Welcome to Aravind Eyecare RFID</title> 
 
\t \t <meta name="description" content="description"> 
 
\t \t <meta name="author" content="Evgeniya"> 
 
\t \t <meta name="keyword" content="keywords"> 
 
\t \t <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> 
 
\t \t <link href="plugins/bootstrap/bootstrap.css" rel="stylesheet"> 
 
\t \t <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> 
 
\t \t <link href='http://fonts.googleapis.com/css?family=Righteous' rel='stylesheet' type='text/css'> 
 
\t \t <link href="css/style.css" rel="stylesheet"> 
 
\t \t <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
\t \t <!--[if lt IE 9]> 
 
\t \t \t \t <script src="http://getbootstrap.com/docs-assets/js/html5shiv.js"></script> 
 
\t \t \t \t <script src="http://getbootstrap.com/docs-assets/js/respond.min.js"></script> 
 
\t \t 
 
           <![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> 
+0

Пожалуйста, не используйте [тег: JQuery-Validate] тег, если ваш вопрос не об этом конкретном плагине. Отредактированные теги. Благодарю. – Sparky

+0

Обратите внимание, что ваш код jQuery предназначен для плагина FormValidation, но вы включили совершенно другой плагин проверки в разделе ''. – Sparky

ответ

2

formValidation() не является носителем функции JQuery. Возможно, вы забыли включить другую библиотеку, или вы забыли вставить/записать функцию в свой собственный js lib.

+0

Спасибо за ваш ответ .. какую библиотеку я должен добавить? –

+0

Похоже на https://github.com/formvalidation/formvalidation. Но я надеюсь, что библиотека не только проверяет JS-сторону. По соображениям безопасности вам потребуется проверка на стороне сервера для ввода форм. –

+0

@FabianPicone вы правы, ему нужно включить JS & CSS файлы FormValidation'. Другое дело, что formvalidation не является бесплатным, вам нужно приобрести лицензию для его использования. – Arkni

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. Попробуйте удалить его, и вы сможете запустить свой код. Вы можете иметь класс «А» только один раз для каждого документа. bootstrapValidator.min.js & bootstrapValidator.js содержат тот же код.

bootstrapValidator.js - аккуратно выглядящий код. Он имеет правильный отступ и интервал.

.min.js имеет все пробелы & комментарии удалены из него. Это помогает быстрее загружать веб-страницу. & меньше по размеру.

Просто укажите, что лучше использовать мини-версию (.min) для вашей живой среды, поскольку Google теперь проверяет время загрузки страницы. Имея все ваши файлы JS, они будут загружаться быстрее и будут забивать больше очков.

Редактировать 1 -

Я также понял, что есть порядок предпочтения, которые должны последовать. Например, если вы хотите выпадать с помощью Bootstrap, вам нужно будет включить Bootstrap перед JQuery. Причина этого заключается в том, что они оба взаимозависимы. & JQuery используется внутри Bootstrap.JS. Если вы сначала загрузите загрузочный файл, он может завершиться до того, как вызов действительно будет выполнен в код начальной загрузки, но до того, как jquery завершит загрузку, следовательно, отсутствующая ссылка.

Следовательно, убедитесь, что ваши библиотеки JS не являются взаимозависимыми. Если да, узнайте порядок предпочтений.

0

изменение Try

$('#loginform').formValidation({ 

в

$('#loginform').bootstrapValidator({ 
+0

Можете ли вы объяснить, как это решит проблему? – Phani

2

Прежде всего, вы должны дать вашей форме идентификатор

<form id="loginform" action="logincheck.jsp" method="post"> 

Затем попытайтесь загрузить библиотеку JQuery, прежде чем bootstrapValidator

<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({ 
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> 
+0

здесь не получаю сообщения об ошибках почему? StudentByAdminPage.jsp? FirstName = & lastName = & phoneNumber = & email = & message = & captcha =: 37 Uncaught TypeError: $ (...). FormValidation не является функцией –

Смежные вопросы