Bleiben auf Bootstrap ausgewählten Registerkarte, wenn Formularfehler

Question

Ich verwende Bootstrap-Registerkarten Ansicht. In jedem Tab hat man ein Login-Formular und das andere hat ein Anmeldeformular. Wenn bei beiden Formularen ein Fehler auftritt, wird auf die erste Registerkarte zurückgegriffen.

Was ich versuche zu erreichen, ist, wenn es einen Fehler auf einem der beiden Formulare gibt, bleibt es auf dieser Registerkarte.

Frage: Wenn bei einem Formular ein Fehler auftritt, wird sichergestellt, dass es auf diesem Bootstrap-Tab bleibt. Bei einem Fehler wird immer auf die erste Registerkarte zurückgekehrt.

ich versucht habe

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#form_signup').submit(function() { 
     if($('#sign_up').hasClass('active')) { 
      $('#sign_up').addClass('in'); 
     } 
    }); 
}); 
</script> 

Vollständige Ansicht

<?php echo $header;?><?php echo $menu;?> 

<div class="container"> 
<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
<li role="presentation" class="active"><a href="#login" role="tab" data-toggle="tab">Login</a></li> 
<li role="presentation"><a href="#sign_up" aria-controls="sign_up" role="tab" data-toggle="tab">Sign Up</a></li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content" style="margin-top: 5rem;"> 
<div role="tabpanel" class="tab-pane active" id="login"> 
<div class="row"> 
<div class="col-lg-6 col-lg-offset-3"> 

<div class="panel panel-default"> 

<div class="panel-body"> 

<div class="form-group"> 
<a href="<?php echo $google_login_url;?>" role="button" class="btn btn-danger btn-block"> 
<i class="fa fa-google-plus" aria-hidden="true"></i> Sign in with Google 
</a> 
</div> 

<hr /> 

<?php if (isset($login_errors)) {?> 
<?php echo $login_errors;?> 
<?php }?> 

<?php echo form_open('users/login', array('id' => 'login', 'name' => 'login', 'role' => 'form'));?> 

<div class="form-group"> 
<label for="input-username">Username</label> 
<input type="text" name="username" class="form-control" id="input-username" placeholder="Username"> 
</div> 

<div class="form-group"> 
<label for="input-password">Password</label> 
<input type="password" name="password" class="form-control" id="input-password" placeholder="Password"> 
</div> 

<div class="checkbox"> 
<label> 
<input type="checkbox"> Remember me 
</label> 
</div> 

<div class="form-group"> 
<?php 
echo form_submit('login', 'Login', array('class' => 'btn btn-primary')) 
;?> 

</div> 

<?php echo form_close();?> 
</div> 
</div> 

</div> 
</div> 
</div><!-- Login --> 

<div role="tabpanel" class="tab-pane" id="sign_up"> 
<div class="row"> 
<div class="col-lg-6 col-lg-offset-3"> 

<div class="panel panel-default"> 

<div class="panel-body"> 

<div class="form-group"> 
<a href="<?php echo $google_login_url;?>" role="button" class="btn btn-danger btn-block"> 
<i class="fa fa-google-plus" aria-hidden="true"></i> Sign in with Google 
</a> 
</div> 

<hr /> 

<?php if (isset($signup_errors)) {?> 
<?php echo $signup_errors;?> 
<?php }?> 

<?php echo form_open('users/signup', array('id' => 'form_signup', 'name' => 'signup', 'role' => 'form'));?> 

<div class="form-group"> 
<label for="input-username">Username</label> 
<input type="text" name="username" class="form-control" id="input-username" placeholder="Username"> 
</div> 

<div class="form-group"> 
<label for="input-email">Email</label> 
<input type="text" name="email" class="form-control" id="input-email" placeholder="Email"> 
</div> 


<div class="form-group"> 
<label for="input-password">Password</label> 
<input type="password" name="password" class="form-control" id="input-password" placeholder="Password"> 
</div> 

<div class="form-group"> 
<?php 
echo form_submit('signup', 'Signup', array('class' => 'btn btn-primary')) 
;?> 
</div> 

<?php echo form_close();?> 
</div> 
</div> 

</div> 
</div> 
</div><!-- Sign Up--> 

</div><!-- Tab Content --> 

</div> 
</div> 
</div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#form_signup').submit(function() { 
     if($('#sign_up').hasClass('active')) { 
      $('#sign_up').addClass('in'); 
     } 
    }); 
}); 
</script> 
<?php echo $footer;?> 

Answer 1

Da die Seite neu geladen wird, wenn das Formular abgeschickt wird, haben Sie die richtigen Registerkarte auf Seite Last zu aktivieren. Sie können, dass durch die Überprüfung tun, wenn die $signup_errors Variable vorhanden sind, wenn ja, das Zeichen auf Registerkarte zu aktivieren, da sonst die Login Register aktiv machen: die Idee von Jeroen Noten

<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" <?php if (!isset($signup_errors)) {?>class="active"<?php }?>><a href="#login" role="tab" data-toggle="tab">Login</a></li> 
    <li role="presentation" <?php if (isset($signup_errors)) {?>class="active"<?php }?>><a href="#sign_up" aria-controls="sign_up" role="tab" data-toggle="tab">Sign Up</a></li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content" style="margin-top: 5rem;"> 
    <div role="tabpanel" class="tab-pane<?php if (!isset($signup_errors)) {?> active<?php }?>" id="login"> 
    ... 
    </div><!-- Login --> 
    <div role="tabpanel" class="tab-pane<?php if (isset($signup_errors)) {?> active<?php }?>" id="sign_up"> 
    ... 
    </div><!-- Sign Up--> 
</div><!-- Tab Content --> 

Answer 2

Lösung Dank

Erstellt eine if-Anweisung und übergeben Variablen

<?php 

if (isset($login_errors)) { 
    $class1 = 'active'; 
} else { 
    $class1 = ''; 
} 

if (isset($signup_errors)) { 
    $class2 = 'active'; 
} else { 
    $class2 = ''; 
} 

?> 

Ansicht

<?php echo $header;?><?php echo $menu;?> 

<div class="container"> 
<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
<!-- Nav tabs --> 
<ul class="nav nav-tabs" role="tablist"> 

<?php 

if (isset($login_errors)) { 
    $class1 = 'active'; 
} else { 
    $class1 = ''; 
} 

if (isset($signup_errors)) { 
    $class2 = 'active'; 
} else { 
    $class2 = ''; 
} 

?> 

<li role="presentation" class="<?php echo $class1;?>"> 
<a href="#login" role="tab" data-toggle="tab">Login</a> 
</li> 
<li role="presentation" class="<?php echo $class2;?>"> 
<a href="#sign_up" aria-controls="sign_up" role="tab" data-toggle="tab">Sign Up</a> 
</li> 
</ul> 
<!-- Tab panes --> 
<div class="tab-content" style="margin-top: 5rem;"> 
<div role="tabpanel" class="tab-pane <?php echo $class1;?>" id="login"> 
<div class="row"> 
<div class="col-lg-6 col-lg-offset-3"> 

<div class="panel panel-default"> 

<div class="panel-body"> 

<div class="form-group"> 
<a href="<?php echo $google_login_url;?>" role="button" class="btn btn-danger btn-block"> 
<i class="fa fa-google-plus" aria-hidden="true"></i> Sign in with Google 
</a> 
</div> 

<hr /> 

<?php if (isset($login_errors)) {?> 
<?php echo $login_errors;?> 
<?php }?> 

<?php echo form_open('users/login', array('id' => 'login', 'name' => 'login', 'role' => 'form'));?> 

<div class="form-group"> 
<label for="input-username">Username</label> 
<input type="text" name="username" class="form-control" id="input-username" placeholder="Username"> 
</div> 

<div class="form-group"> 
<label for="input-password">Password</label> 
<input type="password" name="password" class="form-control" id="input-password" placeholder="Password"> 
</div> 

<div class="checkbox"> 
<label> 
<input type="checkbox"> Remember me 
</label> 
</div> 

<div class="form-group"> 
<?php 
echo form_submit('login', 'Login', array('class' => 'btn btn-primary')) 
;?> 

</div> 

<?php echo form_close();?> 
</div> 
</div> 

</div> 
</div> 
</div><!-- Login --> 

<div role="tabpanel" class="tab-pane <?php echo $class2;?>" id="sign_up"> 
<div class="row"> 
<div class="col-lg-6 col-lg-offset-3"> 

<div class="panel panel-default"> 

<div class="panel-body"> 

<div class="form-group"> 
<a href="<?php echo $google_login_url;?>" role="button" class="btn btn-danger btn-block"> 
<i class="fa fa-google-plus" aria-hidden="true"></i> Sign in with Google 
</a> 
</div> 

<hr /> 

<?php if (isset($signup_errors)) {?> 
<?php echo $signup_errors;?> 
<?php }?> 

<?php echo form_open('users/signup', array('id' => 'form_signup', 'name' => 'signup', 'role' => 'form'));?> 

<div class="form-group"> 
<label for="input-username">Username</label> 
<input type="text" name="username" class="form-control" id="input-username" placeholder="Username"> 
</div> 

<div class="form-group"> 
<label for="input-email">Email</label> 
<input type="text" name="email" class="form-control" id="input-email" placeholder="Email"> 
</div> 


<div class="form-group"> 
<label for="input-password">Password</label> 
<input type="password" name="password" class="form-control" id="input-password" placeholder="Password"> 
</div> 

<div class="form-group"> 
<?php 
echo form_submit('signup', 'Signup', array('class' => 'btn btn-primary')) 
;?> 
</div> 

<?php echo form_close();?> 
</div> 
</div> 

</div> 
</div> 
</div><!-- Sign Up--> 

</div><!-- Tab Content --> 

</div> 
</div> 
</div> 

<script type="text/javascript"> 
</script> 
<?php echo $footer;?>