django - 在 Django 的 HTTP post 请求后保留在选项卡上

Question

我正在为客户的网站制作注册表单(登录和注册)。

它看起来像这样: http://cssdeck.com/labs/twitter-bootstrap-tabbed-login-and-signup-register-forms-interface

我根据请求将其实现为两个选项卡，一个用于登录，另一个用于注册。

我使用 django 表单在服务器上创建表单并使用模板捕获错误 例如这样的事情:

                            {% if respErrors %}
                                <div class="alert alert-danger">    
                                    <strong>Errors:</strong>
                                    <ul>
                                        {% for error in respErrors %}
                                        <li class ="errorLi">{{ error }}</li>
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %} 
                            <p>                                 
                                <label for="{{loginForm.username.id_for_label}}" class="nonBool"> Your Email or Username </label>
                                {{ loginForm.username }}
                                {% if loginForm.username.errors %}
                                <div class="alert alert-danger">                                    
                                    {{ loginForm.username.errors }}
                                </div>
                                {% endif %}
                            </p>

我的问题是，当我在第二个选项卡上时，在这种情况下注册并说我提交了表单并且出现错误，views.py 返回如下:

return render(request,
                      "register.html",
                      {'loginForm': loginForm,
                       'signupForm' : signupForm })

问题是将焦点重新放在第一个选项卡上，我怎样才能使第二个选项卡保持焦点，这样您就不必再次单击第二个选项卡来查看输入错误的字段下的错误？

谢谢

Answer 1

我建议您根据各自的错误更改以下div: <div class = "tab-pane fade" id="login"> , <div class="tab-pane active in" id="create"> .此外，您必须设置 class = 'active'在各自的<li> .在您的特定情况下，请尝试以下操作:

首先:

<!-- language: lang-html -->
<ul class="nav nav-tabs">
     {% if signupForm.errors %}  
        <li><a href="#login" data-toggle="tab">Login</a></li>
        <!-- set the Create Account tab as active -->
        <li class = 'active'><a href="#create" data-toggle="tab">Create Account</a></li>
     {% else %}  
        <!-- set the Login tab as active -->
        <li class = 'active'><a href="#login" data-toggle="tab">Login</a></li>
        <li><a href="#create" data-toggle="tab">Create Account</a></li>
     {% endif %}
</ul>

然后在 <div class="tab-pane active in" id="login"> 中执行此操作行:

<!-- language: lang-html -->
{% if signupForm.errors %}  
            <div class="tab-pane fade" id="login">
{% else %}  
            <!-- show the login tab -->
            <div class="tab-pane active in" id="login">
{% endif %}

最后，在 <div class="tab-pane fade" id="create"> 中执行此操作行:

<!-- language: lang-html -->
{% if signupForm.errors %}  
            <!-- show the create account tab -->
            <div class="tab-pane active in" id="create">
{% else %}  
            <div class="tab-pane fade" id="create">
{% endif %}

注意:请忽略 <!-- language: lang-html -->行，我是 Stackoverflow 的新手，不知道如何为我的答案指定 html 语法。