Jquery验证和使用twitter引导面板
Jquery validation and working with twitter bootstrap panels
我有一个使用jquery验证插件的引导(电子商务结账(表单,需要实现一些行为:
- 面板折叠会触发一个验证事件(请参阅下面的代码(,允许用户移动到下一个面板-现在验证代码不起作用,并在提交处理程序启动时添加"has-error"类。我正试图弄清楚发生了什么。同一页上还有其他表单可以验证
- 单击"下一步"时,使用用户输入的值将面板折叠成静态文本——当面板未折叠时,表单将重新出现,以便用户可以修改
感谢您的帮助。
表单代码
<form id="storecheckout" method="post" action="/mobile/store_checkout.cfm" class="form-horizontal" role="form">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading1" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="true" aria-controls="collapse1" style="cursor:pointer;">
<h2 class="panel-title">
<span class="badge">1</span> Customer/Shipping Information <span class="glyphicons glyphicons-circle-minus pull-right"></span>
</h2>
</div>
<div id="collapse1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading1">
<div class="panel-body">
<div class="form-group">
<label for="ship_firstName" class="col-sm-4 control-label">First Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label for="ship_lastName" class="col-sm-4 control-label">Last Name :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_lastName" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="ship_ad1" class="col-sm-4 control-label">Address/1 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad1" name="ship_ad1" placeholder="Address/1">
</div>
</div>
<div class="form-group">
<label for="ship_ad2" class="col-sm-4 control-label">Address/2 :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_ad2" name="ship_ad2" placeholder="Address/2">
</div>
</div>
<div class="form-group">
<label for="ship_city" class="col-sm-4 control-label">City :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_city" name="ship_city" placeholder="City">
</div>
</div>
<div class="form-group">
<label for="ship_state" class="col-sm-4 control-label">State/Province :</label>
<div class="col-sm-8">
<SELECT NAME="ship_state" id="ship_state" class="form-control">
<OPTION VALUE="AL" >Alabama</OPTION>
</SELECT>
</div>
</div>
<div class="form-group">
<label for="ship_zip" class="col-sm-4 control-label">Postal Code :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="ship_zip" name="ship_zip" placeholder="Postal Code">
</div>
</div>
<div class="form-group">
<label for="ship_country" class="col-sm-4 control-label">Country :</label>
<div class="col-sm-8">
<select name="ship_country" id="ship_country" class="form-control">
<option value="US" selected>United States</option>
</select>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-4 control-label">Email :</label>
<div class="col-sm-8">
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="phone" class="col-sm-4 control-label">Phone :</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="phone" name="phone" placeholder="Phone">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapsex" data-parent="#accordion" href="#collapse2x" aria-expanded="true" aria-controls="collapse2x" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading2" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">2</span> Shipping Method <span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading2">
<div class="panel-body">
List Shipping Methods
<div class="row">
<div class="col-xs-6 col-sm-4"> </div>
<div class="col-xs-6 col-sm-4 col-sm-offset-4">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="true" aria-controls="collapse3" class="btn btn-success btn-block pull-right next">Next <span class="glyphicon glyphicons glyphicons-forward"></span></a> </div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading3" data-parent="#accordion" aria-expanded="false">
<h2 class="panel-title">
<span class="badge">3</span> Payment Information<span class="glyphicons glyphicons-circle-plus pull-right" aria-hidden="true"></span>
</h2>
</div>
<div id="collapse3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading3">
<div class="panel-body">
Payment Info
</div>
</div>
</div>
<button type="submit" id="submit" class="btn btn-block btn-large btn-success">Submit Order</button>
<input type="submit" name="su" value="sub">
<!-- end panel group -->
</div>
</form>
页面JQUERY
$(document).ready(function() {
// override jquery validate plugin defaults
$.validator.setDefaults({
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
//$(element).closest('td').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
//$(element).closest('td').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if(element.parent('.help-block').length) {
error.insertAfter(element.parent());
} else {
error.insertBefore(element);
}
}
});
$("#storecheckout").validate({
ignore: "",
rules: {
ship_firstname: "required"
},
messages: {
ship_firstname: "Please enter your first name"
},
onkeyup: false, //turn off auto validate whilst typing
submitHandler: function (form) {
alert('is good');
return false;
}
});
// validate sections on next click
$('.next').click(function(e){
e.preventDefault();
var sectionValid = true;
var collapse = $(this).closest('.panel-collapse.collapse');
$.each(collapse.find('input, select, textarea'), function(){
if(!$(this).valid()){
sectionValid = false;
}
});
if(sectionValid){
collapse.collapse('toggle');
collapse.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
}
});
$('.previous').click(function(e){
e.preventDefault();
var sectionValid = true;
var collapse = $(this).closest('.panel-collapse.collapse');
$.each(collapse.find('input, select, textarea'), function(){
if(!$(this).valid()){
sectionValid = false;
}
});
if(sectionValid){
collapse.collapse('toggle');
collapse.parents('.panel').prev().find('.panel-collapse.collapse').collapse('toggle');
}
});
});
在您的form input
中,我发现您没有给出
"name">
attribute to input
您的代码
<input type="text" class="form-control" id="ship_firstName" placeholder="First Name">
更新的代码
<input type="text" class="form-control" id="ship_firstName" name="ship_firstName" placeholder="First Name">
这将工作
相关文章:
- Twitter应用程序专用身份验证
- Twitter API 1.1无法对您2进行身份验证
- 注册,登录和分享内容通过LinkedIn和Twitter与服务器端身份验证(如Google+)
- Twitter搜索API身份验证错误
- req.user在使用express服务器passport.js进行twitter身份验证后未定义
- Firebase twitter身份验证和跨站点说明
- 访问 Twitter API - 身份验证和骨干模型
- 收到错误 401 未经授权,无法在 Twitter 中验证 OAuth 签名和令牌
- 在JavaScript中玩游戏时的Twitter身份验证
- 如何使用jQuery Validate正确验证放置在多个选项卡上的Twitter的Bootstrap表单
- 检索经过Twitter验证的用户's node.js中的推文
- Codebird JS中的Twitter身份验证
- Twitter身份验证-无PIN码鸟
- 使用jquery验证Facebook和Twitter的URL
- 如何使用Twitter Bootstrap 2.0验证输入字段并应用错误类
- 如何构建Twitter OAuth身份验证
- 如何使用API 1.1连接到Twitter,可能使用OAuth身份验证
- 验证Twitter Bootstrap模型中的表单
- 我如何在twitter API中使用OAuth身份验证
- 在节点中配置Twitter Passport以允许经过身份验证的用户发布tweet