MVC Twitter Bootstrap Wizard Disappear after validation Errors #222
Description
I posted my question in different website last week , but i got no answer, so i decided to post it here directly.
I used the Twitter Bootstrap Wizard on this link http://vinceg.github.io/twitter-bootstrap-wizard/examples/basic-custombuttonsfirstlast.html
Its working as i need on my appliaction, the problem that when any validation error exist while submission the form, the Twitter Bootstrap Wizard features disappear, Precisely, the Tabs color disappear and all buttons no more clickable !!
Any suggestions from experts here ?
Thanks in advance.
This How it working before Validation Message:
This How it look like after validation:
This the view in cshtml format:
`@model BrojectName.Models.Inv
@{
ViewBag.Title = "My View";
}
@using(Html.BeginForm())
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<div id = "wizard" >
< h4 > Title </ h4 >
< hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<!-- Tabstrip -->
<ul class="nav nav-tabs" role="tablist">
<li role = "presentation" class="active">
<a href = "#Idea" role="tab" data-toggle="tab">Domain & Funding</a>
</li>
<li role = "presentation" >
< a href="#Team" role="tab" data-toggle="tab">Team & Output</a>
</li>
<li role = "presentation" >
< a href="#Extra" role="tab" data-toggle="tab">Extra</a>
</li>
</ul>
<br /><br />
<!-- Tab panes -->
<div class="tab-content">
<div role = "tabpanel" class="tab-pane active" id="Idea">
..........
</div> <!--Idea tab end-->
<div role = "tabpanel" class="tab-pane" id="Team">
..........
</div> <!--Team tab end-->
<div role = "tabpanel" class="tab-pane" id="Extra">
..........
</div> <!--Extra tab end-->
</div> <!-- Tab panes end -->
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<div style = "float:right" >
< input type='button' class='btn button-next' name='next' value='Next' />
<input type = 'button' class='btn button-last' name='last' value='Last' />
</div>
<div style = "float:left" >
< input type='button' class='btn button-first' name='first' value='First' />
<input type = 'button' class='btn button-previous' name='previous' value='Previous' />
</div>
<div class="col-md-offset-4">
<input type = "submit" value="Submit" class="btn btn-default" name="submitCommand" onclick="return confirm('Are you sure you wish to submit?');" />
<input type = "submit" value="Save & continue later" class="btn btn-default " />
@Html.ActionLink("Back to List", "Index", null, new { @class = "btn btn-default " })
</div>
</div>
</div>
</div><!-- Wizard div end -->
</div> <!-- Form div End -->
}`
This is the java-script part:
$(document).ready(function () { $('#wizard').bootstrapWizard({ 'nextSelector': '.button-next', 'previousSelector': '.button-previous', 'firstSelector': '.button-first', 'lastSelector': '.button-last' }); });