在 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 returns 如下：

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">。此外，您必须在相应的 <li> 中设置 class = 'active'。在您的特定情况下，请尝试以下操作：

第一个：

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

注意： 请忽略  行，我是 Whosebug 的新手，不知道如何为我的答案指定 html 语法.

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

Remain on tab after HTTP post request in Django

forms

django

http

twitter-bootstrap