jQuery验证器没有响应

时间：2013-04-15 18:51:38

标签： jquery jquery-validate

我试过使用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 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

小心......您遗漏了</div>

的<div class="fileupload fileupload-new" data-provides="fileupload">结束标记

答案 2 :(得分：0)

您的代码：

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

rule被称为accept，而不是accepted。

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

DEMO：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

答案 3 :(得分：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. bootstrap.js
  3. jquery.validate.js
  4. additional-methods.js //这依赖于 jquery.validate.js
  5. SYS / jsFunc.js

    6. 我在计算机上使用新的包含顺序对其进行了测试，它的工作原理如下： - ）

相关问题
最新问题