如果表单错误，请保持引导选择选项卡

Question

我正在使用bootstrap标签视图。在每个标签中，一个具有登录表单，另一个具有注册表单。如果任何一个表单上都有错误，则返回第一个选项卡。

我想要实现的是，如果任何一个表单上都有错误，它将保留在该选项卡上。

问题：如果表单上有错误，请确保它将保留在该引导选项卡上。如果出现错误，它会一直返回到第一个选项卡。

我试过了

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

完整视图

<?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

由于在提交表单时会重新加载页面，因此您必须在页面加载时激活正确的选项卡。您可以通过检查$signup_errors变量是否存在来执行此操作，如果是，则使注册选项卡处于活动状态，否则激活登录选项卡：

<!-- 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

解决方案感谢Jeroen Noten的想法

创建了一个if语句并传递了变量

<?php 

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

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

?>

查看

<?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;?>