jQuery 验证不起作用（包括引导表单）答案

【问题标题】：jQuery validate not working (Bootstrap form included)jQuery 验证不起作用（包括引导表单）
【发布时间】：2013-11-26 10:11:05
【问题描述】：

我也在使用 Twitter Bootstrap（第一次）。这是最小化的代码，因此您可以帮助我确定为什么它甚至不会验证功能！我已经工作了好几个小时了，我不知道我错过了什么。 Validate.js 是从官方插件网站下载的，但如果我从 cdn 使用它是一样的。

<head>
<link rel="stylesheet" href="css/bootstrap.css"  type="text/css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

    <script>
    $().ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>
</head>

<body>
<div class="container">
    <div class="row">
        <div class="col-md-4 col-md-offset-4">

            <form name="myform" id="myform" method="post" action="">
                <label class="control-label" for="InputName">Name:</label>
                <input type="text" class="form-control" name="InputName" placeholder="ex. John">    

            <button type="submit" class="btn btn-default">Submit</button>
            </form>


        </div>
    </div>
</div>

</body>

【问题讨论】：

试试jsfiddle.net/arunpjohny/jcaT4/1
<center> 标签多年前已被弃用！
您是否收到任何控制台错误？您确定正确包含脚本吗？

标签： jquery twitter-bootstrap jquery-validate twitter-bootstrap-3

【解决方案1】：

1) <center> was deprecated 多年前。改用 CSS。

2) ().ready(function({...})) 不推荐使用 as per jQuery documentation。请改用$(document).ready(function({...})) 或$(function({...}))。

但是，您的代码与您发布的完全一样。

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

【讨论】：

你知道为什么不在我的服务器上工作吗？
@mortusdetus，我怎么知道你的服务器？我只能选择您在 OP 中发布的内容。您是否收到任何 JavaScript 错误？您是否正确包含文件？你上传了吗？文件路径是否正确？
也许你有一个想法，因为我当然没有。如果我使用 cdn 链接，那是同样的事情，所以不要正确包含。
@mortusdetus，我无权访问您的服务器，但由于 JavaScript 在客户端中运行，因此问题可能与您的服务器无关。第三次，您的控制台中是否有任何 JavaScript 错误？

【解决方案2】：

src 链接必须使用 https 而不是 http。

【讨论】：

【解决方案3】：

从我的表单标记中删除一个 css 类名称解决了我遇到的类似问题。

我在<form> 标签中有一个类“validate-form”。

【讨论】：

【解决方案4】：

尝试使用这个

<script>
    $(document).ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>
/*Instead of */

  <script>
    $().ready(function() {
          $("#myform").validate({
             rules: {
                 InputName: {
                    required: true
                }
             }
          });
    });
</script>

【讨论】：

【解决方案5】：

如果一切都正确但仍然没有进行验证，那么尝试使用 debug:true 选项

$("#myForm").validate({
  debug: true
});

重新加载页面并检查控制台是否有任何可能的错误``

【讨论】：