如何使用 Ajax 渲染 django-crispy-forms 的验证错误？

Posted 2023-05-08

【中文标题】如何使用 Ajax 渲染 django-crispy-forms 的验证错误？

【英文标题】：How to rendering validation errors of django-crispy-forms with Ajax?

【发布时间】：2020-08-28 00:57:30

【问题描述】：

我想用 ajax 显示 Django 默认表单错误。 如果有一些错误，这里的代码应该显示 django-crispy-forms 的验证错误。 但我不能那样做。 什么应该添加后记？

Views.py；

    if form.is_valid();  
        ~~~~~~
        if self.request.is_ajax():
            return JsonResponse(
                'is_valid': True,
                'redirect':reverse(/.../),
            )
        return redirect(hogehoge)
    else:
        if self.request.is_ajax():
            return JsonResponse(
                'is_valid': False,
                'error':form.errors,
            )

javascript;

<script>
$(function() 
  $(document).on('click', '.submit_button', function (e) 
    var $form = $('.form'); 
    var form = $form[0];
    e.preventDefault();
    $.ajax(
        processData: false,
        contentType: false,
        dataType: 'json',
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: new FormData(form),
        ).done(function(data,textStatus) 
          if (data.is_valid) 
            window.location.href = data.redirect;
            
            else 
             *Display Django default validation errors if there are error forms.*
            
      );
    );
  );
</script>

*表单html；

<form class="form" action="" method="post" enctype="multipart/form-data">
<div class="input">
  % if field.errors %
  % render_field field class+="form-handles is-invalid" %
  % for error in field.errors %
  <div class="invalid-render">
     error|escape 
  </div>
  % endfor %
  % else %
  % render_field field class+="form-handles" %
  % endif %
</div>
  <div class="text-center">
    <button type="submit" class="submit_button">submit</button>
  </div>

</form>

【问题讨论】：

您需要在哪里显示错误？你也可以发布你在ajax成功中获得的输出，即：data？

@Swati 现在，我编辑问题列表。你能看添加的内容吗？是的。 JSON 响应不是问题。

您能否在上面的问题中添加您在data 中获得的确切操作，以便我可以为您制作演示代码？

【参考方案1】：

您可以从官方文档中找到有关how to render only form in AJAX response 的信息。它将在那里包含表单、输入值和表单错误。

【讨论】：

非常感谢！多亏了这份文档，一切顺利。

@HASE96 这个答案对你有用还是你用另一种方式做的？请接受或为将来有此问题的其他开发者提供答案。