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文件加载的顺序，以便在jQuery之后启动Bootstrap。

<!--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网站上说：

插件依赖项 一些插件和CSS组件依赖于其他插件。如果单独包含插件，请确保在文档中检查这些依赖项。 另请注意，所有插件都依赖于jQuery（这意味着必须在插件文件之前包含jQuery）。请咨询我们的bower.json，了解支持哪些版本的jQuery 。

Answer 2

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

该插件无效，因为您的所有字段都不包含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

2 个答案: