Question

我在JSFiddle中为jQuery验证找到了一个很好的例子。但是，当我为工作代码的相似性制作另一个代码时 - 它的工作正在进行中。我做错了什么？

<form method="POST" action="contact-form-submission.php" class="form-horizontal" id="contact-form">

        <div class="control-group">
            <label class="control-label" for="email">Email Address</label>
            <div class="controls">
                <input type="text" name="email" id="email" placeholder="Email">
            </div>
        </div>
         <div class="control-group">
            <div class="controls">
                <input type="password" name="password" id="password" placeholder="Password">
            </div>
        </div>
        <div class="control-group">
            <div class="controls">
                <input type="password" name="confPassword" id="confPassword" placeholder="Confirm Password">
            </div>
        </div>
        <div class="form-actions">
            <input type="hidden" name="save" value="contact">
</div>
</form>


$(document).ready(function () {

    $('#contact-form').validate({
        rules: {

            email: {
                required: true,
                email: true
            },
            password: {
                minlength: 2,
                required: true
            },
            confPassword: {
                    minlenth: 2,
                equalTo : "#password"
            }
        },
        highlight: function (element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (element) {
            element.text('OK!').addClass('valid')
                .closest('.control-group').removeClass('error').addClass('success');
        }
    });

});

连接这些瘟疫：

jquery.validate.js additional-methods.js bootstrap-combined.min.css bootstrap.min.js

working code， my code

Answer 1

要记住有关访问协议的一件事，您的JSFiddle正在通过HTTPS协议进行访问。

你的JSFiddle

您的JSFiddle拥有使用HTTP协议的外部资源。我建议更新资源以使用HTTPS而不是HTTP协议，因为JSFiddle的控制台输出显示Blocked loading mixed active content错误。
确保您的JSFiddle JavaScript选项应该加载jQuery。您可以选择符合要求的选项。

或者，您可以通过HTTP协议访问您的JSFiddle：http://jsfiddle.net/5WMff/。

本地服务器

要在本地服务器上工作，我建议您下载每个外部资源的副本并保存在Web应用程序可访问的文件夹中，如屏幕截图所示，并更新<head>标记以包含<script>和用于加载外部资源的<link/>标记。

<head>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/jquery.validate-1.11.1.js"></script>
    <script type="text/javascript" src="/test-web/scripts/jquery/additional-methods-1.11.1.js"></script>
    <link rel="stylesheet" type="text/css" href="/test-web/scripts/jquery/bootstrap-combined.min-2.3.2.css"/>
    <script type="text/javascript" src="/test-web/scripts/jquery/bootstrap.min-2.3.2.js"></script>
</head>

或者，您可以使用该网址用于src或href属性以从Internet获取外部资源。

这在我的本地服务器上运行，如下所示。请告诉我们您的最终结果是否成功。

电子邮件错误

更正电子邮件

jQuery在一个案例中有效，但在JSFiddle的另一个案例中并不起作用

1 个答案:

你的JSFiddle

本地服务器