问题描述
在使用引导之前,我的jQuery表单验证工作。现在它不工作。
非常感谢这个问题的帮助。谢谢!
以下是我的一些代码...
我的表单和脚本调用:
< div class =form1>
< form class =form-horizontalrole =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>
< link rel =stylesheettype =text / csshref =css / background.css> <! - 我的css - >
< link rel =stylesheethref =http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css>
< 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表单验证不适用于引导程序的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!