Question

我创建了一个位于对话框内的登录表单。它没有任何ajax正常工作。问题是我想在关闭对话框之前验证登录表单。现在，如果有人单击提交，则会关闭对话框。成功登录后，如果出现错误，用户需要再次单击登录才能找出错误。因此，我试图在关闭对话框之前实现jquery来验证数据。

模板

     <a id="login_div" onclick="toggleOverlay();" stlye="color:blue; cursor:pointer;">login or register</a>                                  
76        <div class="overlay">                                                                                                                
77            <div class="wrap-outer">                                                                                                         
78                <div class="wrap">                                                                                                           
79                    <div class="my-dialog">                                                                                                  
80                <a style="color:blue; cursor:pointer;" onclick="toggleOverlay();">Close</a>                                                  
81                                                                                                                                             
82                <form id="login_form" name="login_form" action="" method="post">                                                             
83                                                                                                                                             
84                                                                                                                                             
85                    <h3 id="login_header">Login</h3>                                                                                         
86                                                                                                                                             
87                    <label id="login_username">Username:</label>                                                                             
88                    <label id="login_form_username">{{ request.login_form.username }}< /label>                                                
89                    <label id="login_password" for="password">Password:</label>                                                              
90                    <label id="login_form_password">{{ request.login_form.password }} </label>                                                
91                                                                                                                                             
92                     {% csrf_token %}                                                                                                        
93                                                                                                                                             
94                    <input id="login_button" type="submit" name="login_name" value="login" />                                                
95                    <input type="hidden" id="request_path" name="next" value="{{ request.path }}"/>                                          
96                                                                                                                                             
97                </form>

jquery的

1 $(window).load(function(){                                                                                                                  
2 $('#login_form').submit(function(e){                                                                                                        
3  var request_url = document.getElementById('#request_path')                                                                                 
4          $.ajax({                                                                                                                           
5             type:"POST",                                                                                                                    
6             url: request_url,                                                                                                               
7             data:$('#register_form').serialize(),                                                                                           
8             error: function(xhr, ajaxOptions, thrownError){ alert(thrownError); },                                                          
9             success: function(data){}                                                                                                       
10             });                                                                                                                             
11      e.preventDefault();                                                                                                                    
12 });                                                                                                                                         
13 });

查看

13     def process_request(self, request):                                                                                                     
14                                                                                                                                             
15         # if the top login form has been posted                                                                                             
16         if request.method == 'POST':                                                                                                        
17                                                                                                                                             
18             # validate the form                                                                                                             
19             lform = AuthenticationForm(data=request.POST)                                                                                   
20             if lform.is_valid():                                                                                                            
21                                                                                                                                             
22                 # log the user in                                                                                                           
23                 django_login(request, lform.get_user())                                                                                     
24                 return HttpResponseRedirect(request.REQUEST.get('next', '/'))                                                               
25                                                                                                                                             
26                                                                                                                                             
27                 # if this is the logout page, then redirect to /                                                                            
28                 # so we don't get logged out just after logging in                                                                          
29             else:                                                                                                                           
30                 lform                                                                                                                       
31                                                                                                                                             
32         else:                                                                                                                               
33             lform = AuthenticationForm(request)                                                                                             
34                                                                                                                                             
35         # attach the form to the request so it can be accessed within the templates                                                         
36         request.login_form = lform

TL; DR：我想使用jquery验证登录表单，并在成功验证后关闭对话框。

Answer 1

为什么不简单地利用内置的Django登录视图并将任何验证错误作为JSON返回，然后您可以使用jQuery显示它？

你需要做几件事......

继承自内置的AuthenticationForm，并提供一种将表单错误作为JSON返回的方法。检查JSON中是否有任何错误，并迭代它们并将它们添加到对话框中的HTML中。

[无耻插头] 请查看我的AjaxForm / ModelForm基类，它将在名为“errors_as_json”的表单上为您提供额外的方法。我还有一些示例jQuery代码来演示如何显示错误。

http://djangosnippets.org/snippets/2393/

快乐的编码。

Django Jquery登录表

1 个答案: