django jquery-form .load（）フォームエラーの場合

Question

jquery.load（）関数を使用してポップアップdivにフォームを読み込んでいて、これまでうまく動作しています。私が追加したいのは、フォームがエラーで提出されたときに、現時点で実際のフォームページにリダイレクトするのではなく、エラーマークをフォームのポップアップdivにロードすることです。

誰かが、私が完全に動作すると思うjquery-formを使用することをお勧めしました。私はそれをどのように実装するのか分かりません。ここ

は.LOAD（）関数である。ここで

$(document).ready(function(){ 
     $(".create").on("click", function(){ 
      $("#popupContact").load("/cookbook/createrecipe #createform"); 
     }); 
}); 

は、フォームをロードするページです。ここ

<div id="popupContact" class="popup"> 
     <a id="popupContactClose" style="cursor:pointer;float:right;">x</a> 
     <p id="contactArea"> 
     </p> 
</div> 
<div id="backgroundPopup"> 
</div> 
<div id="col2-footer"> 
{% paginate %} 
</div> 

は私のフォームテンプレートである：ここ

<div id="createform"> 
<h1>Create New Recipe</h1> 
    <form id="createrecipe" action="{% url createrecipe %}" method="POST"> 
     <table> 
      {% csrf_token %} 
      {{ form.as_table }} 
     </table> 
     <p><input type="submit" value="Submit"></p> 
    </form> 
</div> 

jquery形式を使用しようとしています：

<script> 
    // wait for the DOM to be loaded 
    $(document).ready(function() { 
     var options ={ 
      target: '.popup', 
    }; 
    $('#createrecipe').submit(function() { 
     $(this).ajaxSubmit(options); 
     return false; 
    }); 
}); 
</script> 

createrecipeビュー：

$('#createform form').submit(function(e) { 
e.preventDefault(); 
$.post("/your views url/", { 
      data: $('#createform form').serialize(), 
      },function(data){ //this is the successfunction 
           //data is what your view returns} 
}); 

あなたのビュー：

def createrecipe(request): 
    if not request.user.is_authenticated(): 
     return HttpResponseRedirect('/index/') 
    else: 
     if request.method == 'POST': 
      print 1 
      form = RecipeForm(request.POST) 
      if form.is_valid(): 
       print 2 
       recipe = form.save(commit=False) 
       recipe.original_cookbook = request.user.cookbooks.all()[0] 
       recipe.pub_date = datetime.datetime.now() 
       recipe.save() 
       user = request.user 
       cookbooks = user.cookbooks 
       cookbook = cookbooks.all()[0] 
       cookbook.recipes.add(recipe) 
       return HttpResponseRedirect('/account') 
     else: 
      form = RecipeForm() 

     return render_to_response('cookbook/createrecipe.html', 
            {'form':form}, 
           context_instance=RequestContext(request)) 

ありがとう snackerfish

Answer 1

insidエラーを発生させることができますかすべてがOKです

Answer 2

あなたはとにかくあなたがそうでなければ、あなたがリダイレクトされますAJAXを経由して、フォームを提出しなければならないjqueryのを使用しているため、エラーをjsonとして返して、javascriptの中でそれらを処理できるようにする必要があります：

from django.utils import simplejson 

def ajax_recipe(request): 
    if request.method == 'POST': 
     form = YourForm(request.POST) 
     if form.is_valid(): 
      form.save() 
      return HttpResponse("ok") 
     else: 
      errors = form.errors 
      return HttpResponse(simplejson.dumps(errors)) 
    else: 
     data = "error" 
     return HttpResponse(data) 

このマークアップを使用すると、jquery post success関数を使用して、必要な場所にフォームエラーを配置できます。

if(data == "ok"){do something} 
// else error handling 
var errors = jQuery.parseJSON(data) 
if(errors.somefield){//place errors.somefield anywhere} 

コードはテストされていません。しかし、それは私が行く方法です。

編集

あなたがそれぞれのXMLHttpRequestのCSRFトークンの値にカスタムX-CSRFTokenヘッダーを設定する必要があり、この作品を作るために注意してください。他の言葉でコピーし、テンプレート内のDjangoのドキュメントからスクリプトを貼り付けます。私は私のjavascriptの構文に誤りがあったhttps://docs.djangoproject.com/en/dev/ref/contrib/csrf/#ajax

ザッツはあなたForm.py

def clean_somefield(self): 
     somefield = self.cleaned_data.get('some field') 
     if not somefield: 
      raise forms.ValidationError(u'This field is required.')