javascript - validation in tabbed pane of bootstrap theme -
i performing validations on text fields given theme, have 3 tabs, , submit button in 3rd tab, validation works no notification users missing in of fields, attaching screen shot. can please guide me how redirected field empty on submit click.
<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 post comments internet rating sites, while may use name or alias name. please select 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 name entered above</label> <label> <input type="radio" name="choice" value="no" id="choice_1" onchange="enabletextbox();"> use alias name, 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 care <?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 last tab hide last button , show 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> 
what going have set sort of case in js checks fields validity before moving next tab (this quick pseudocode)
on click next step if ( fields valid ) go next tab normal else if .focus on field not complete
Comments
Post a Comment