jQuery 表单验证无法与 bootstrap 一起使用

Question

在使用 bootstrap 之前，我的 jQuery 表单验证工作正常。现在不行了。 非常感谢帮助解决这个问题。谢谢!

这是我的一些代码...

我的表单和脚本调用:

<div class="form1">
            <!-- registration form, which is validated by script bellow -->
            <form class="form-horizontal" role="form" id='registerform'>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="email">Email:</label>
                    <div class="col-sm-10">
                        <input type="email" class="form-control" id="email"
                            placeholder="Enter email">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwd"
                            placeholder="Enter password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="pwd">Confirm
                        Password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" id="pwdcnf"
                            placeholder="Enter password">
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <button type="submit" class="btn btn-default">Submit</button>
                    </div>
                </div>
            </form>
            <!-- form validation script -->
            <script type="text/javascript" src="js/formValidation.js"></script>

我的 jQuery:

    $('#registerform').validate({
    rules:{
        errorClass: "error",
        'email':{
            required: true,
            email: true
        },
        'pwd':{
            required: true,
            minlength: 5
        },
        'pwdcnf':{
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    },
    messages:{
        'pwd':{
            required:"This field is required",
            minlength:"Your password must be at least 5 character long"
        },
        'pwdcnf':{
            required:"This field is required",
            minlength:"Your password must be at least 5 character long",
            equalTo:"Your password does not match"
        }
    }
});

在顶部:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import of bootstrap css and js code -->
<link rel="stylesheet" type="text/css" href="css/background.css"> <!-- my css -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!--these two scripts allow the use of the jQuery form validation plug in.-->
<!--the form validation script is lower down bellow the registration form -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
</head>

我猜 Bootstrap javascript 文件与 jQuery 和我的验证有一些冲突？

Answer 1

我认为 Bootstrap js 可能需要 jQuery 作为依赖项。

尝试更改 js 文件加载的顺序，以便 Bootstrap 在 jQuery 之后。

<!--LOAD JQUERY-->
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<!--LOAD THIS FILE AFTER JQUERY-->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

关于Bootstrap网站上写着:

Plugin dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. Also note that all plugins depend on jQuery (this means jQuery must be included before the plugin files). Consult our bower.json to see which versions of jQuery are supported.