在bootstrap主题的选项卡式窗格中进行验证
我正在对给定主题的文本字段执行验证，我有3个选项卡，并且提交按钮位于第3个选项卡中，验证实际上有效，但在某些字段中没有用户喜欢某些内容的通知，我附加了一个屏幕截图。你可以指导我如何重定向到提交点击时空的字段。
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<!-- morris stacked chart -->
<div class="row-fluid">
<!-- block --><!-- /block -->
</div>
<div class="row-fluid">
<!-- block --><!-- /block -->
</div>
<!-- wizard -->
<div class="row-fluid section">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left"><strong>Doctor Name : <?php echo $_SESSION['doctorname']; ?>
</strong></div>
</div>
<div class="block-content collapse in">
<div class="span12">
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li><a href="#tab1" data-toggle="tab">Step 1</a></li>
<li><a href="#tab2" data-toggle="tab">Step 2</a></li>
<li><a href="#tab3" data-toggle="tab">Step 3</a></li>
</ul>
</div>
</div>
</div>
<div id="bar" class="progress progress-striped active">
<div class="bar"></div>
</div>
<div class="tab-content">
<div class="tab-pane" id="tab1">
<form name="form" id="form" class="form-horizontal" action="#" method="POST">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">Name</label>
<div class="controls">
<input name="pname" class="input-xlarge focused" id="focusedInput" type="text" value="" required>
</div>
</div>
<div class="control-group">
<label class="control-label" for="email">Email</label>
<div class="controls">
<input name="pemail" class="input-xlarge focused" id="focusedInput" type="text" value="" required>
</div>
</div>
<div class="control-group">
<label>We would like to post your comments to internet rating sites, while we may use your name or an alias name. Please select your desire:</label>
</div>
<div class="control-group">
<label class="control-label" for="focusedInput"></label>
<div class="controls">
<p>
<label>
<input type="radio" name="choice" value="yes" id="choice_0">
Yes, use my name as entered above</label>
<label>
<input type="radio" name="choice" value="no" id="choice_1" onChange="enabletextbox();">
Use the alias name, as I enter below</label>
<input id="alias" name="alias" type="text" class="input-xlarge focused">
</p>
</div>
</div>
</fieldset>
</div>
<div class="tab-pane" id="tab2">
<fieldset>
<?php
$i = 1;
$counter = 1;
$count = 1;
while ($row = mysqli_fetch_array($questions)) {
?>
<div class="control-group">
<label class="control-label" for="focusedInput">(<?php echo $counter; ?>)
<?php
$questionid = $row['question_id'];
$question = $row['question'];
?>
<input type="hidden" name="questionid[<?php echo $counter; ?>]" value="<?php echo $questionid; ?>" />
<input type="hidden" name="question[<?php echo $counter; ?>]" value="<?php echo $question; ?>" />
<?php echo $row['question']; ?></label>
<div class="controls">
<?php
if ($row['answer_type'] == "Ratings") {
echo "<p>
Low<input type='radio' name='rating$counter' value='1' id='rating_0'>
<input type='radio' name='rating$counter' value='2' id='rating_1'>
<input type='radio' name='rating$counter' value='3' id='rating_2'>
<input type='radio' name='rating$counter' value='4' id='rating_3'>
<input type='radio' name='rating$counter' value='5' id='rating_4'>High
</p>
";
$i++;
} else if ($row['answer_type'] == "Comments") {
echo "<textarea name='answer$count' cols='' rows=''></textarea>";
}
echo "<br />";
$counter++;
$count++;
?>
</div>
</div>
<?php } ?>
</fieldset>
</div>
<div class="tab-pane" id="tab3">
<fieldset>
<div class="control-group">
<label class="control-label" for="focusedInput">Testimonial about your care by <?php echo $_SESSION['doctorname']; ?></label>
<div class="controls">
<textarea name="review" cols="5" rows="5" required></textarea>
</div>
</div>
<div class="form-actions">
<input type="submit" class="btn btn-primary" value="Save & Press Finish"></input>
</div>
</fieldset>
</form>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;"><a href="javascript:void(0);">First</a></li>
<li class="previous"><a href="javascript:void(0);">Previous</a></li>
<li class="next"><a href="javascript:void(0);">Next</a></li>
<li class="next finish" style="display:none;"><a href="javascript:;">Finish</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
<hr>
<footer>
<p>© Versasia Infosoft Pvt. Ltd. 2014</p>
</footer>
<!--/.fluid-container-->
<link href="vendors/datepicker.css" rel="stylesheet" media="screen">
<link href="vendors/uniform.default.css" rel="stylesheet" media="screen">
<link href="vendors/chosen.min.css" rel="stylesheet" media="screen">
<link href="vendors/wysiwyg/bootstrap-wysihtml5.css" rel="stylesheet" media="screen">
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/jquery.uniform.min.js"></script>
<script src="vendors/chosen.jquery.min.js"></script>
<script src="vendors/bootstrap-datepicker.js"></script>
<script src="vendors/wysiwyg/wysihtml5-0.3.0.js"></script>
<script src="vendors/wysiwyg/bootstrap-wysihtml5.js"></script>
<script src="vendors/wizard/jquery.bootstrap.wizard.min.js"></script>
<script src="assets/scripts.js"></script>
<script>
$(function() {
$(".datepicker").datepicker();
$(".uniform_on").uniform();
$(".chzn-select").chosen();
$('.textarea').wysihtml5();
$('#rootwizard').bootstrapWizard({onTabShow: function(tab, navigation, index) {
var $total = navigation.find('li').length;
var $current = index + 1;
var $percent = ($current / $total) * 100;
$('#rootwizard').find('.bar').css({width: $percent + '%'});
// If it's the last tab then hide the last button and show the finish instead
if ($current >= $total) {
$('#rootwizard').find('.pager .next').hide();
$('#rootwizard').find('.pager .finish').show();
$('#rootwizard').find('.pager .finish').removeClass('disabled');
} else {
$('#rootwizard').find('.pager .next').show();
$('#rootwizard').find('.pager .finish').hide();
}
}});
$('#rootwizard .finish').click(function() {
alert('Finished!, Starting over!');
$('#rootwizard').find("a[href*='tab1']").trigger('click');
});
});
</script>
1 个答案:
答案 0 :(得分：0)
你可能要做的就是在JS中设置某种情况，它会在移动到下一个选项卡之前检查字段的有效性（这是快速伪代码）
on click for next step
if ( all fields are valid )
go to next tab like normal
else if
.focus on field that is not complete
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？