2012-12-03 28 views
0

我創建了一個對話框裏面坐着一個登錄表單。它按預期工作,沒有任何Ajax。問題是我想在關閉對話框之前驗證登錄表單。現在,如果有人點擊提交,對話框關閉。成功登錄後,如果出現錯誤,用戶需要再次點擊登錄才能發現錯誤。因此,我正試圖在關閉對話框之前實現jquery來驗證數據。Django的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登錄表單,並在驗證成功後關閉對話框。

回答

1

爲什麼不直接利用內置的Django登錄查看並返回所有的驗證錯誤爲JSON,然後您可以顯示使用jQuery?

你需要做兩件事情......

繼承內置AuthenticationForm並提供形式返回錯誤的JSON的方法。 檢查JSON中是否有任何錯誤,並遍歷它們並將它們添加到對話框中的HTML中。

[無恥插件] 請看看我的AjaxForm/ModelForm基類,它會給你一個名爲「errors_as_json」的表單上的額外方法。我也有一些示例jQuery代碼來演示如何顯示錯誤。

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

快樂編碼。

+0

+1這就是這樣一個驚人的解決方案。我不知道這是可能的。我不明白你的代碼中的這一點,雖然'if(errors .__ all__!== undefined){form.append(errors .__ all__); }' – Houman

+1

謝謝。它正在查看是否有任何非字段錯誤,如果是,它會將它們附加到表單中。 – Brandon