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.

Answer 2

由于 email 字段上的 type="email"，浏览器中内置了 HTML5 验证，您收到电子邮件错误。

插件无法正常工作，因为 none 个字段包含 name 属性。 每个输入的唯一 name 属性是这个插件必须工作。这就是它跟踪一切的方式。

同样在您的 rules 对象中，这些名称应该对应于每个 name 属性，而不是每个 id.

$('#registerform').validate({
    errorClass: "error",
    rules:{      
        'email': {   // <- this is the NAME attribute
            required: true,
            email: true
        },
        'pwd': {     // <- this is the NAME attribute
            required: true,
            minlength: 5
        },
        'pwdcnf': {  // <- this is the NAME attribute
            required: true,
            minlength: 5,
            equalTo: "#password"
        }
    }, ....

HTML:

<input name="email" type="email" class="form-control" id="email" placeholder="Enter email">

<input name="pwd" type="password" class="form-control" id="pwd" placeholder="Enter password">

<input name="pwdcnf" type="password" class="form-control" id="pwdcnf" placeholder="Enter password">

jQuery 表单验证不适用于 bootstrap

jQuery form validation not working with bootstrap

html

css

jquery

jquery-validate

twitter-bootstrap