Djangoログインモーダルフォームのエラー表示

Question

ユーザーが誤ったログインフォームを送信したときに、/ accounts/loginにリダイレクトするのではなく、モーダルにエラーを表示しようとしています。ログインモーダルが

... 
<button type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#loginModal" id="login_modal_trigger">Log In</button> 

{% include 'registration/login.html' with form=form %} 
... 

登録/ login.htmlと

<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <h5 class="modal-title" id="exampleModalLabel">Log In</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 id="content-container" class="container p-none"> 
      <div class="lgn-container col-lg-8"> 
       <form id="login-form" method="post" 
         action="{% url 'login' %}"> 
        {% csrf_token %} 
        <table class="table"> 
         <tr> 
          <td><label for="id_username">Username</label></td> 
          <td><input id="id_username" name="username" 
             type="text" class="form-control"></td> 
         </tr> 
         <tr> 
          <td><label for="id_password">Password</label></td> 
          <td><input id="id_password" name="password" 
             type="password" class="form-control"></td> 
         </tr> 
        </table> 
        {% if form.errors %} 
         <p class=" label label-danger"> 
          Your username and password didn't match. 
          Please try again. 
         </p> 
        {% endif %} 

        <input type="submit" id="ajax_form_submit" value="Login" 
          class="btn btn-primary pull-right" /> 
<!-- I comment the next line to allow the LOGIN_REDERICT_URL in project/settings.py to work. --> 
        <!-- <input type="hidden" name="next" value="{{ next }}" /> --> 
       </form> 
      </div> 
     </div> 
    </div> 
    </div> 
</div> 
</div> 

script.jsを表示さ

basic.html： 私はevent.preventDefault();がエラーがある場合にリダイレクト防ぐと考えました。

$(document).ready(function() { 
var frm = $('#login_form'); 
$('#loginModal').click("#ajax_form_submit", function(event){ 
     event.preventDefault(); 
     // $('#login_form').ajax_form(target:'#login_form').submit(); 
     $.ajax({//begin 
     type: 'POST', 
     url: frm.attr('action'), 
     data: $(frm).serialize(), 
     success: function(data){ 
      $(frm).hide(); 
    $("#div-form").html("<h3 style='text-align:center;'>Thank you, for Registering!</h3>"); 

     }, 
     error: function(data) { 
      $("#div-form").html("Failure!"); 
     }//end error 
    });//end ajax 
    }); 
}); 

プロジェクト/ settings.py

... 
LOGIN_REDIRECT_URL = '/app/login_success/' 
... 

プロジェクト/ urls.py

... 
urlpatterns = [ 
    ... 
    url(r'^accounts/', include('django.contrib.auth.urls')), 
    ... 
] 
... 

アプリ/ urls.py

... 
app_name = 'app' 
urlpatterns = [ 
    ... 
    url(r'^login_success/$', views.login_success, name='login_success'), # redirect to user profile 
    ... 
] 
... 

ログインモーダル作品が、それinstがエラーの場合は/ accounts/login urlにリダイレクトしますモーダルにエラーメッセージを表示してしまいました。私が使っているjsは、主に他の投稿のものです。

Answer 1

これは、サーバーが200 http応答を返すためです。 AJAXコードのエラーセクションに入力するには、401などのエラーを返す必要があります（必要なエラーを確認してください）。たとえば、return JsonResponse（form.errors、status = 401）です。 <form ic-post-to="{% url 'login' %}" ic-target="$('#div-form')">のようなHTMLタグでAJAXリクエストを送信するintercooler.jsのようないくつかのlibreriesがあります。これはすべてのコードと同じです。

あなたの最後のコメントに返信するために、私は一般的な意見を一度も使用していません。

views.py

def iniciarSesion(request): 
if request.method == 'POST': 
    loginForm = LoginForm(request.POST) 
    if loginForm.is_valid(): 
     acceso = authenticate(username=loginForm.cleaned_data['username'], password=loginForm.cleaned_data['password']) 
     if acceso is not None and acceso.is_active: 
      login(request, acceso) 
      return HttpResponse('') 
     else: 
      return JsonResponse({'password':'El usuario o contraseña son incorrectos'}, status=401) 
    else: 
     return JsonResponse(loginForm.errors, status=400) 

forms.py

class LoginForm(forms.Form): 
username = forms.CharField(max_length=60, label=u'Usuario') 
password = forms.CharField(max_length=32, label=u'Contraseña') 

そして、それがすべてです：私はあなたに私のコードのスニペットを与えます。 AJAXリクエストを行うには、実際にこのライブラリhttp://intercoolerjs.org/docs.htmlを使用してください。リクエストごとに独自のAJAXコードを冗長に書くよりも優れています。もちろん、余分なライブラリを必要とせずに、AJAXを使用することができます。