Django + Bootstrap 模态表单仍然显示 Django 的默认错误，而不是引导错误？答案

【问题标题】：Django + Bootstrap modal form still shows Djangos default errors, not bootstrapped errors?Django + Bootstrap 模态表单仍然显示 Django 的默认错误，而不是引导错误？
【发布时间】：2021-08-16 01:59:26
【问题描述】：

我正在努力在弹出表单模式中显示引导程序表单错误。当我提交表单时，缺少一些必填字段，我仍然收到 Django 内置的基本表单错误消息，或者即使字段需要小数，我输入文本，我得到一个错误，但它仍然是 django 的内置基本验证错误.我正在使用清晰的表单和引导程序来尝试在页面上以更好的方式显示错误。

这就是现在显示错误的方式......

我这里有一个简单的表格...

{% load crispy_forms_tags %}


<form role="form" method="post" name="employee-add" id="employee-add"  action="{% url 'employee_add' company_id %}">
  {% csrf_token %}
    <input type="hidden" id="companyID" name="comp" value="{{ company_id }}">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">Add Employee</h4>
  </div>
  <div class="modal-body">
        <div class="modal-inner defult-inner">
    {% for field in employee_form %}
          <div class="form-group{% if field.errors %} has-error{% endif %}">
                {{ field|as_crispy_field }}
            {% for error in field.errors %}
              <span class="error-msg">{{ error }}</span>s
            {% endfor %}
          </div>
    {% endfor %}
      <div class="footer-button employee-footer">
        <button class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button class="btn btn-danger" id="save">Save</button>
      </div>
    </div>
  </div>
</form>

模态表单由 AJAX GET 请求填充。

$(function () {
    // GET request to grab employee form.

    $(".js-create").click(function () {
    let employee_id = $("input[name='employee_id']").val();
    $.ajax({
      url: `/company/employee/${employee_id}/`,
      type: 'get',
      data: {'employee_id': employee_id},
      dataType: 'json',
      beforeSend: function () {
        $("#modal-employee").modal("show");
      },
      success: function (data) {
        $("#modal-employee .modal-content").html(data.html_form);
        $(".selectpicker").selectpicker('refresh');
      }
    });
    });
});

Django 视图...

@csrf_protect
def employee_create(request, company_id):

    template_name = 'business/employee-create.html'
    data = dict()
    company = Company.objects.get(id=company_id)


    if request.method == 'POST':
        employee_form = EmployeeForm(request.POST)
        if employee_form.is_valid():
            logger.debug('Valid')
            emp = employee_form.save(commit=False)
            emp.company = venue
            emp.user = request.user
            emp.save()
            return redirect('comp_detail', company_id=company_id)
        else:
            logger.debug('Error')

    else:
        employee_form = EmployeeForm()
        data['html_form'] = render_to_string(
            template_name,
            {'employee_form': employee_form, 'company_id': company.id},
            request=request,
        )
    return JsonResponse(data)

我觉得好像它在这里..

{% for field in employee_form %}
          <div class="form-group{% if field.errors %} has-error{% endif %}">
            {{ field|as_crispy_field }}
        {% for error in field.errors %}
          <span class="error-msg">{{ error }}</span>s
        {% endfor %}
      </div>
{% endfor %}

因为，当我检查页面时，has-error 类永远不会出现。然后，如果我删除 {% if field.errors %}line 并添加 has-error 类，表单会加载漂亮的红色引导表单边框。所以我知道引导程序已正确加载。

【问题讨论】：

标签： django twitter-bootstrap twitter-bootstrap-3 django-forms

【解决方案1】：

尝试使用这个{% for error in form.non_field_errors %}。希望它能解决你的问题。

【讨论】：

【解决方案2】：

您需要在浏览器中禁用验证。只需将novalidate 添加到您的表单即可。

<form novalidate="novalidate">...</form>

【讨论】：

嗯，这只是将我发送到在 else 语句中显示 JSON 的页面.....{'form_is_valid: False}