使用Bootstrap Modal作为注册和登录表单。出现错误时，将提供整个页面

Question

我正在使用jquery.bootstrap.modal.forms.js从他们的url加载登录和注册表单作为模态使用以下代码：

<script>
$(function ($, undefined) {
    
    // log in & sign up buttons
    $(".register-btn").modalForm({
      
      modalID: "#registerModal",
      
      formURL: "/register-modal/",
    
    });
    
});

$(function ($, undefined) {
    
    // log in & sign up buttons
    $(".login-btn").modalForm({
      
      modalID: "#registerModal",
      
      formURL: "/login-modal/",
    
    });
    
});

$(function ($, undefined) {
    
    // log in & sign up buttons
    $(".forgot-password").modalForm({
      
      modalID: "#registerModal",      
      formURL: "/recover-modal/",
    
    });
    
});
</script>

模式的HTML代码

<div class="modal fade" id="registerModal" tabindex="-1" role="dialog" aria-labelledby="registerModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document" style="width:400px;">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="registerModalLabel">Register</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div>

模式代码：

{% extends 'base.html' %}
{% load static %}


 {% block title %} Login {% endblock %}
 {% block style %}
 

 {% endblock %}

 {% block content %}  
  
 <div class="container-fluid ">
    
    <div class="row ">  
        
        <div class="col-sm-12 col-xs-12 col-md-12">
            
            
            <form class="account-register form-narrow p-3 mb-4 bg-white" id="login_form" method="POST"
                action="" autocomplete="off">
                {% if messages %}
            <div id="messages">
                {% for message in messages %}
                <div class="alert alert-dismissible alert-info"
                    role="alert">
                    <button type="button" class="close" data-dismiss="alert"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                    {{ message|escape }}
                </div>
                {% endfor %}
            </div>
            {% endif %}
            {% if form.non_field_errors %}
            <div id="messages">
                {% for message in form.non_field_errors %}
                <div class="alert alert-dismissible alert-danger"
                    role="alert">
                    <button type="button" class="close" data-dismiss="alert"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                    {{ message|escape }}
                </div>
                {% endfor %}
            </div>
            {% endif %}
                <div class="text-center">
                  <h4><i class="fa fa-lock fa-3x"></i></h4>
                </div>
                <h4 class="text-center mb-5">Login </h4>
                {% csrf_token %}
                <div class="form-group{% if form.username.errors %} has-error{% endif %}" >
                    <label class="control-label" for="id_username">Email Address</label>
                    <input class="form-control input-lg" id="id_username" maxlength="150" name="username"  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type="text" required />
                    <div class="error-block">{{ form.username.errors }}</div>
                </div>
                <div class="form-group{% if form.password.errors %} has-error{% endif %}">
                    <label class="control-label" for="id_password">Password</label>
                    <div class="input-group input-group-lg">
                    </div>
                    <input class="form-control input-lg" id="id_password" name="password" type="password" required />
                    
                    <div class="error-block">{{ form.password.errors }}</div>
                </div>
                
                
                <div class="g-recaptcha mb-2" data-sitekey="6LebmPsZAAAAADT_1QjnC70TJ2aiBX1a9rqWmhev"
                style="transform:scale(1.1);-webkit-transform:scale(1.1);transform-origin:0 0;-webkit-transform-origin:0 0;">
               </div>
                
                <button type="submit" name="login"
                    class="btn btn-danger btn-sm btn-block text-uppercase shadow-4 mb-4" >
                Login<i class="fa fa-sign-in" aria-hidden="true"></i>
                </button>
                
                <br/>
                
                <p class="text-center">
                    Don't have an account?<button type="button" class="register-btn a btn btn-link" style="font-size:14px; margin-top:-4px;">Register </button>
                </p>
                <br/>
                <p class="text-center text-primary">

                    <button  type="button" class="forgot-password a btn btn-link" style="font-size:14px; text-decoration:none;">Forgot user ID and/or password? </button> 
                </p>
            </form>
            
        </div>
    </div>
    
</div>

<!-- /container -->

 {% endblock %}

 {% block scripts %}
 <script src="{% static 'js/toggle.js' %}"></script>
 <script src="{% static 'js/floating-wpp.min.js' %}"></script>
 <script src="{% static 'js/jquery.magnific-popup.js' %}"></script>
 <script src="{% static 'js/qoc_home.js' %}"></script>
 <script src='https://www.google.com/recaptcha/api.js'></script>
 
 <script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script>
 <script>
$(document).ready(function(){
  $("#login_form").on("submit", function(){
    $("#pageloader").css('visibility', 'visible');
  });//submit
});

$(function ($, undefined) {
    
    // log in & sign up buttons
    $(".register-btn").modalForm({
      
      modalID: "#registerModal",      
      formURL: "/register-modal/",
    
    });
    
});



$(function ($, undefined) {
    
    // log in & sign up buttons
    $(".forgot-password").modalForm({
      
      modalID: "#registerModal",      
      formURL: "/recover-modal/",
    
    });
    
});
</script>

{% endblock %}

LoginView代码

class LoginViewModal(FormView):
    template_name = 'login-modal.html'
    form_class = LoginForm
    success_url = '/dashboard'

    def get(self, request, *args, **kwargs):
        if request.user.is_authenticated:
            return redirect ("/dashboard")
        else:
            return super(LoginViewModal, self).get(request, *args, **kwargs)
            
    
    def dispatch(self, request, *args, **kwargs):
        
        if (self.request.user.is_authenticated) and (self.request.user.user_type==4):
            return redirect('/dashboard')
        else:
            return super().dispatch(request, *args, **kwargs)

    def get_context_data(self, **kwargs):
        """Use this to add extra context."""       
        context = super(LoginViewModal, self).get_context_data(**kwargs)
        if 'show_captcha' in self.request.session:
            show_captcha = self.request.session['show_captcha']
            context['show_captcha'] = True
        return context
    
    def form_valid(self, form):
        user = form.login(self.request)        
        
        recaptcha_response = self.request.POST.get('g-recaptcha-response')
        url = 'https://www.google.com/recaptcha/api/siteverify'
        payload = {
            'secret': settings.GOOGLE_RECAPTCHA_SECRET_KEY,
            'response': recaptcha_response
        }
        data = urllib.parse.urlencode(payload).encode()
        req = urllib.request.Request(url, data=data)

        # verify the token submitted with the form is valid
        response = urllib.request.urlopen(req)
        result = json.loads(response.read().decode())
        if result['success']:
            if user.two_factor_auth is False and (user.phone_number_verified is True):
                login(self.request, user) 
                try:
                    UserLog.objects.filter(username=user.id).update(failed_attempt=0)
                except Exception:
                    print("No failed attempts ")
                   
                return redirect('/dashboard')
            
            else:
                try:
                    response = send_verfication_code(user)
                    pass
                except Exception as e:
                    messages.add_message(self.request, messages.ERROR,
                                        'verification code not sent. \n'
                                        'Please retry logging in.')
                    return redirect('/login')
                data = json.loads(response.text)

                if data['success'] == False:
                    messages.add_message(self.request, messages.ERROR,
                                    data['message'])
                    return redirect('/login')

                
                if data['success'] == True:
                    self.request.method = "GET"
                    print(self.request.method)
                    kwargs = {'user':user}
                    return PhoneVerificationView(self.request, **kwargs)
                else:
                    messages.add_message(self.request, messages.ERROR,
                            data['message'])
                    return redirect('/login')
        else:
            messages.add_message(self.request, messages.ERROR, 'Invalid reCAPTCHA. Please try again.')
            return redirect('/login')

当表单中出现错误时(例如，如果用户输入了错误的密码。模式重定向到/ login - modal /，显示带有登录表单的完整页面，而不是返回到相同的模式。当发生错误时，我应该怎么做才能保持在模式中？

Answer 1

如果我错了，请纠正我，您在这里试图实现的是，当用户输入错误的凭据时，例如，您希望在页面上显示错误消息，而不必重新加载，这样凭据就不会丢失？如果是这种情况，您必须使用AJAX/fetch API，我建议您使用AJAX因为您已经在使用jquery，您可以使用jquery $.post发送数据。

使用Django实现AJAX有点复杂，但是一个简单的谷歌搜索就可以了，this教程解释了如何使用ajax和Django实现登录和注册机制。

现在，如果您只想在出现错误时再次显示模式，您可以将error变量作为布尔值，0表示没有错误，1表示相反，并将其传递到前端，并在HTML中有一个脚本标记，当出现错误时将触发模式。