Javascript 图标切换引导3和JQuery验证-功能不正确
我一直在编写所附的代码,出于某些(可能很明显的)原因,我的图标切换不起作用。有什么想法吗 我知道我已经正确地转换了var collapse,其他部分正在工作,并且我已经将警报添加到标记进程(稍后我将删除这些警报并将其移动到控制台) 这是HTML-Javascript 图标切换引导3和JQuery验证-功能不正确,javascript,jquery,twitter-bootstrap,Javascript,Jquery,Twitter Bootstrap,我一直在编写所附的代码,出于某些(可能很明显的)原因,我的图标切换不起作用。有什么想法吗 我知道我已经正确地转换了var collapse,其他部分正在工作,并且我已经将警报添加到标记进程(稍后我将删除这些警报并将其移动到控制台) 这是HTML- <!-- Panel - Start Panel 5 --> <div class='panel panel-default'> <div class='panel-heading'> <h4 class=
<!-- Panel - Start Panel 5 -->
<div class='panel panel-default'>
<div class='panel-heading'>
<h4 class='panel-title'>
Phone and Email
<i class='indicator glyphicon glyphicon-question-sign pull-right'></i>
</h4>
</div>
<div id='pnl_agency_contact' class='panel-collapse collapse'>
<div class='panel-body'>
<div class='form-group'>
<label>Agency Primary Phone</label>
<div class='input-group'>
<span class='input-group-addon'><i class='fa fa-phone'></i></span>
<input type='text' class='form-control' id='phone' name='phone' value='' required >
</div>
</div>
<script>
$(document).ready(function() {
$('#phone').mask('(999) 999-9999',{placeholder:'#'});
});
</script>
<div class='form-group'>
<label>Agency Primary Fax</label>
<div class='input-group'>
<span class='input-group-addon'><i class='fa fa-phone'></i></span>
<input type='text' class='form-control' id='phone_fax' name='phone_fax' value='' required >
</div>
</div>
<script>
$(document).ready(function() {
$('#phone_fax').mask('(999) 999-9999',{placeholder:'#'});
});
</script>
<!-- Form Text Input Required -->
<div class='form-group'>
<label>Agency Primary Email</label>
<div class='input-group'>
<span class='input-group-addon'><i class='fa fa-pencil'></i></span>
<input type='email' id='email' name='email' value='' class='form-control' >
</div>
</div>
<a href='#' id='btn_step_two' name='btn_step_two' class='btn btn-success pull-right continue'>Next Step</a>
</div>
</div>
</div>
<!-- Panel - End -->
您可以发布一个JSFIDLE或更多的代码吗?添加了html-代码引用了jquery验证。
function toggleChevron(e) {
$(e.target)
.prev('.panel-heading')
.find("i.indicator")
.toggleClass('glyphicon-question-sign glyphicon-ok-sign');
}
$('.continue').click(function(e){
e.preventDefault();
var sectionValid = true;
var collapse = $(this).closest('.panel-collapse.collapse');
alert ('Checking Step Validation of ' + collapse.attr('id'));
$.each(collapse.find('input, select, textarea'), function(){
if(!$(this).valid()){
$(this).parent('.form-group').addClass( "has-error has-feedback" );
sectionValid = false;
}
else{
$(this).parent('.form-group').removeClass("has-error has-feedback");
$(this).parent('.form-group').addClass( "has-success has-feedback" );
}
});
if(sectionValid){
alert ('Step Validate Complete!');
collapse.collapse('toggle');
toggleChevron(collapse);
collapse.parents('.panel').next().find('.panel-collapse.collapse').collapse('toggle');
}
});