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

注意：请忽略行，我是Stackoverflow的新手，并且不知道如何为我的答案指定html sintax。

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

1 个答案: