Bootstrap 3 JQuery验证不起作用

I am working on Symfony2 project and have used bootstrap 3.0.2. I have used jquery validation 1.9.0 plugin for login validation. I want to do somethi like thisFiddle is worked in core php but in symfony it doesn't work. Here is my code

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);
        }
    }
});

I have tried to debig using firebug and it shows error as below

enter image description here But, still not working.Please help me out.

drutjkpsr67393592
drutjkpsr67393592 yah页面提交后刷新,另一个页面加载成功。验证像“最小的chaerctersrequired”不显示,没有任何js和php错误。
6 年多之前 回复
doufusi2013
doufusi2013 “不工作”是什么意思?任何js错误?提交时页面是否刷新?给出一些线索
6 年多之前 回复
download12749
download12749 浏览器控制台中没有任何错误。
6 年多之前 回复
dongtaijue1578
dongtaijue1578 浏览器控制台中的任何错误
6 年多之前 回复

1个回答



也许脚本在页面加载之前运行。 在 script.js </ strong> </ p>

  $(document).ready(function(){
$('form')。中验证(。validate({

规则:{
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);
}
}

});
});
</ code> </ pre>
</ div>

展开原文

原文

Maybe script runs before page load. Try this in 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);
            }
        }
    });
});

dongxixia6399
dongxixia6399 谢谢@BABAL,我已经在jquery验证插件之前加载了Scripts.js.再次感谢
6 年多之前 回复
dousi8931
dousi8931 我编辑了我的问题并插入了firebug中显示的错误。
6 年多之前 回复
dou8mwz5079
dou8mwz5079 我只是在检查。
6 年多之前 回复
douguai6716
douguai6716 萤火虫有什么错误吗?
6 年多之前 回复
dongxuxian1123
dongxuxian1123 嘿,谢谢我试过但不行。 有什么想法吗?
6 年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问