Bootstrap 3 JQuery 验证不起作用

Question

我正在开发 Symfony2 项目并使用了 bootstrap 3.0.2。我使用 jquery 验证 1.9.0 插件进行登录验证。 我想做这样的事情Fiddle 在核心 php 中工作，但在 symfony 中它不起作用。 这是我的代码

Login.html.twig

<script src="{{asset('bundles/Loginbundle/js/script.js')}}"></script>
<script src="{{asset('bundles/Loginbundle/js/jquery-1.7.1.min.js')}}"></script>
<script src="{{asset('bundles/Loginbundle/js/jquery.validate.min.js')}}"></script>
<link href="{{asset('bundles/Loginbundle/css/bootstrap.css')}}" rel="stylesheet">
<form id="contact-form" class="form-horizontal" action="{{ path('login_login_homepage')}}" method="POST">
    <div class="form-group">
        <label class="control-label" for="user">Username:</label>
        <div class="input-group">
            <span class="input-group-addon">@</span>
            <input type="text" class="form-control" name='user' placeholder='Username' />
        </div>
    </div>    
    <div class="form-group">
        <label class="control-label" for="pass">Password:</label>
        <div class="input-group">
            <span class="input-group-addon"></span>
            <input class="form-control" type='password' name='pass' placeholder='Password'/>
        </div>
    </div>    
    <div class="checkbox">
        <label>
            <input type="checkbox" name="remember">
            Remember Me
        </label>
    </div>
    <!--<input type="checkbox" name="remember" value="Remember-Me"><p style="display:inline;"> &nbsp;Remember Me</p>
    -->
    <button class="btn btn-primary" type="submit" >SignIn</button>
    <a href="{{path('login_login_signup')}}">Sign Up</a>
    <br><br><br>  
</form>

scripy.js

$('form').validate({
    rules: {
        user: {
            minlength: 5,
            maxlength: 15,
            required: true
        },
        email: {
            required: true
        },
        pass: {
            minlength: 5,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
        $(element).closest('.form-group').removeClass('has-success');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
        $(element).closest('.form-group').addClass('has-success');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if (element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});

我尝试使用 firebug 进行调试，但显示错误如下

但是，还是不行。请帮帮我。

Answer 1

也许脚本在页面加载之前运行。在 script.js

中试试这个

$(document).ready(function() {
    $('form').validate({
        rules: {
            user: {
                minlength: 5,
                maxlength: 15,
                required: true
            },
            email: {
                required: true
            },
            pass: {
                minlength: 5,
                maxlength: 15,
                required: true
            }
        },
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
            $(element).closest('.form-group').removeClass('has-success');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
            $(element).closest('.form-group').addClass('has-success');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if (element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
});