jQuery表单验证不适用于引导程序 [英] jQuery form validation not working with bootstrap

问题描述

在使用引导之前，我的jQuery表单验证工作。现在它不工作。
非常感谢这个问题的帮助。谢谢！

以下是我的一些代码...

我的表单和脚本调用：

 < div class =form1> 
 <！ - 注册表格，由脚注在下面进行验证 - > 
< form class =form-horizo​​ntalrole =formid ='registerform'> 
< div class =form-group> 
< label class =control-label col-sm-2for =email>电子邮件地址：< / label> 
< div class =col-sm-10> 
< input type =emailclass =form-controlid =email
 placeholder =Enter email> 
< / div> 
< / div> 
< div class =form-group> 
< label class =control-label col-sm-2for =pwd>密码：< / label> 
< div class =col-sm-10> 
< input type =passwordclass =form-controlid =pwd
 placeholder =Enter password> 
< / div> 
< / div> 
< div class =form-group> 
< label class =control-label col-sm-2for =pwd>确认
密码：< / label> 
< div class =col-sm-10> 
< input type =passwordclass =form-controlid =pwdcnf
 placeholder =Enter password> 
< / div> 
< / div> 
< div class =form-group> 
< div class =col-sm-offset-2 col-sm-10> 
< button type =submitclass =btn btn-default>提交< / button> 
< / div> 
< / div> 
< / form> 
<！ - 表单验证脚本 - > 
< script type =text / javascriptsrc =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
} 
}，
消息：{
'pwd'：{
 required：这个字段是必需的，
 minlength：你的密码必须至少有5个字符长
}，
'pwdcnf'： {
 required：这个字段是必需的，
 minlength：你的密码必须至少有5个字符长，
等于：你的密码不匹配
} 
} 
}）; 
  

顶部：

 < meta charset =utf-8> 
< meta name =viewportcontent =width = device-width，initial-scale = 1> 
 <！ - 导入引导程序css和js代码 - > 
< link rel =stylesheettype =text / csshref =css / background.css> <！ - 我的css  - > 
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css> 
 
 <！ - 这两个脚本允许使用jQuery表单验证插件.--> 
 <！ - 表单验证脚本在注册表单下方下方 - > 
< script src =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js>< / script> 
< script type =text / javascriptsrc =http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js>< / script> 
< script type =text / javascriptsrc =http://ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js>< / script> 
< / head> 
  

我猜测bootstrap javascript文件与jQuery和我的验证有些冲突吗？ type =电子邮件已经内置于浏览器中，因此您收到电子邮件错误在电子邮件字段中。

插件不工作，因为没有任何字段包含名称属性。每个输入的唯一名称属性对于此插件工作。这是它如何跟踪所有内容。

在你的规则对象中，这些名称应该对应于每个 name 属性，不是每个 id 。

  $（'＃registerform'）。validate（{
 errorClass：error，
 rules：{
'email'：{//<  -  this是NAME属性
 required：true，
 email：true 
}，
'pwd'：{//<  - 这是NAME属性
 required： true，
 minlength：5 
}，
'pwdcnf'：{//<  - 这是NAME属性
 required：true，
 minlength：5， 
 equalTo：#password
} 
}，.... 
  

HTML：

 < input name =emailtype =emailclass =form-control id =emailplaceholder =输入电子邮件> 
 
<输入名称= pwdtype =passwordclass =form-controlid =pwdplaceholder =Enter password> 
 
< input name =pwdcnftype =passwordclass =form-controlid =pwdcnfplaceholder =Enter password> 
  

Before using bootstrap, my jQuery form validation worked. Now it's not working. Help with this problem much appreciated. Thanks!

Here's some of my code...

My form and script call:

<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>

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

on top:

<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>

I'm guessing that the bootstrap javascript file is conflicting some how with jQuery and my validation?

解决方案

You are getting an email error thanks to HTML5 validation already built into the browser thanks to type="email" on the email field.

The plugin is not working because none of your fields contain a name attribute. A unique name attribute on each input is mandatory for this plugin to work. It's how it keeps track of everything.

Also within your rules object, those names are supposed to correspond to each name attribute, not each 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表单验证不适用于引导程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！