MVC Twitter Bootstrap Wizard Disappear after validation Errors

[aalhinai]

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' }); });

[VinceG]

Do you have a live example ? Plunkr maybe?

…

----- Vincent Gabriel Software Engineer Please excuse my brevity, sent from my iPhone

On Nov 6, 2017, at 03:20, aalhinai ***@***.***> wrote: 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: ***@***.*** 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' }); }); — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[aalhinai]

unfortunately, i don't have live demo, i tried to put the example in both jsfiddle vs Plunker, but it not display as needed, i thing i need to tweak it to show you and this may take time, do you have another fastest option?