0

我尝试使用 jQuery 验证器，但它似乎只是没有响应。我正在尝试验证图像上传表单是否不为空。我添加了该if(jQuery)部分以检查是否实际包含 jQuery，并且确实包含。我无法弄清楚是什么导致了它发生。任何建议都会有所帮助。

HTML 代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="sys/jsFunc.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

    <meta charset="utf-8">
    <title>picLoc</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->


  </head>

  <body>
    <div class="container">

      <!-- Main hero unit for a primary marketing message or call to action -->
      <div class="hero-unit">
          <center>
             <h2>Upload a picture and find where exactly it was taken</h2>
             </br>
             <h2>It really works !</h2>
             </br>
             <form action="results.php" id="upload-image" method="post" enctype="multipart/form-data">
                 <div class="fileupload fileupload-new" data-provides="fileupload">
                  <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;"></div>
                  <div>
                    <span class="btn btn-file"><span class="fileupload-new">Select image</span><span class="fileupload-exists">Change</span><input type="file" name="pic" id="pic"/></span>
                    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                    <button type="submit" class="btn">Upload</button>
                  </div>
             </form>
          </center>
      </div>




      <hr>

      <footer></footer>

    </div> <!-- /container -->

  </body>
</html>

JavaScript 代码：

if(jQuery)
{
    alert('included');
}
else
{
    alert('not included');
}

jQuery.validator.setDefaults(
{
    debug: true,
    success: "valid"
});

$(document).ready(function()
{
    $('#upload-image').validate(
    {
        rules : 
        {
            pic : 
            {
                required : true,
                accept : "image/*"
            }
        }
    });
});
4

4 回答 4

1

$document在$document.ready(function()...应该是$(document)：

$(document).ready(function(){
    $('#upload-image').validate({
        rules : {
            pic : {
                required : true,
                accepted : "image/*"
            }
        }
    });
});

编辑问题后：

您还忘记关闭表单中的 div 标签：

<form action="results.php" id="upload-image" method="post" enctype="multipart/form-data">
    <div class="fileupload fileupload-new" data-provides="fileupload">
        <div class="fileupload-preview thumbnail" style="width: 200px; height: 150px;">
        </div>
        <div>
            <span class="btn btn-file">
                <span class="fileupload-new">
                    Select image
                </span>
                <span class="fileupload-exists">
                    Change
                </span>
                <input type="file" name="pic" id="pic"/>
            </span>
            <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">
                Remove
            </a>
            <button type="submit" class="btn">
                Upload
            </button>
        </div>
    </div>
</form>
于 2013-04-15T18:53:04.160 回答
0

小心......你错过了</div>结束标签<div class="fileupload fileupload-new" data-provides="fileupload">

于 2013-04-15T18:56:30.330 回答
0

你的代码：

pic: {
   required: true,
   accepted: "image/*"
}

rule所谓的accept，不是的accepted。

请参阅： http ://docs.jquery.com/Plugins/Validation/Methods/accept#mimetype

演示：http: //jsfiddle.net/d5Fzc/

$(document).ready(function () {

    $('#upload-image').validate({
        rules: {
            pic: {
                required: true,
                accept: "image/*"
            }
        }
    });

});

编辑：

我已将您新更新的代码放在此 jsFiddle 中，它仍然有效：

http://jsfiddle.net/kyYnb/

但是，您的 OP 中的代码将不起作用，仅仅是因为您完全忘记了包含 jQuery Validate 插件......

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="sys/jsFunc.js"></script>

包括插件...

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js

对于accept规则，您还需要additional-methods.js文件...

<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>

http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js

于 2013-04-15T20:09:56.893 回答
0

我假设你sys\jsFunc.js是你的 jQuery 验证器初始化代码的地方。
如果是这种情况，则问题在于您的 JavaScript 包含顺序。

你的

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="sys/jsFunc.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

使固定

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script type="text/javascript" src="sys/jsFunc.js"></script>

JavaScript 文件包括顺序：

  1. jQuery.js
  2. 引导程序.js
  3. jquery.validate.js
  4. additional-methods.js // 这依赖于jquery.validate.js
  5. 系统/jsFunc.js

我在我的计算机上使用新的包含命令对其进行了测试，它可以工作:-)

于 2013-04-17T21:03:45.410 回答