验证错误不会出现在 Django 表单中

Question

我正在尝试创建一个表单，用户将在其中输入他们的电子邮件。通常，电子邮件的验证错误（空字段或格式不正确）由浏览器显示。

使用基本表单示例，一切都正确显示：

<form action="/notify-email/add/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

在我的情况下，如果没有验证错误，我会使用 ajax 请求来保存电子邮件并显示带有感谢消息的模式。但如果有验证错误，我只有在悬停时才能看到它们。

此外，即使验证出现错误，也会显示模态。

这是我的models.py：

from django.db import models


class NotifyEmail(models.Model):
    email = models.EmailField(max_length=255)
    date_added = models.DateField(auto_now_add=True)
    time_added = models.TimeField(auto_now_add=True)

    def __str__(self):
        return self.email

这是基于模型的表格：

from django import forms
from landing.models import NotifyEmail


class NotifyEmailForm(forms.ModelForm):
    class Meta:
        model = NotifyEmail
        fields = ["email"]

    def __init__(self, *args, **kwargs):
        super(NotifyEmailForm, self).__init__(*args, **kwargs)

        self.fields['email'].widget = forms.EmailInput(attrs={'placeholder': 'Email',
                                                              'required': True})

我的意见.py：

from django.shortcuts import render
from django.http import JsonResponse
from .forms import NotifyEmailForm



def add_notify_email(request):
    if request.method == "POST":
        form = NotifyEmailForm(request.POST)

        if form.is_valid():
            form.save(commit=True)
            print("Email Added.")
            return JsonResponse({'msg': 'Data saved'})
        else:
            print("Error in Notify Form")
            return JsonResponse({"msg": "Error"})

    else:
        form = NotifyEmailForm()
    return render(request, "landing/home.html", {"form": form})

我的 urls.py:

from django.conf.urls import url
from . import views

urlpatterns = [url(r'^notify-email/add/$', views.add_notify_email)]

html代码：

<div class="container-fluid" id="comingSoon">
    <div class="container">
        <h2>Coming Soon</h2>
        <h5>If you want to get notified when we go live, please enter your email below.</h5>
    </div>
    <div class="container" id="notify-email-container">
        <form action="/notify-email/add/" method="post" id="notify-email-form">
            {% csrf_token %}
            <div class="form-group row">
                <div class="col-sm-10" id="email-input-container">
                    <input class="form-control" type="email" name="email" placeholder="Your email...." maxlength="255" required id="id_email" />
                </div>

                 {% for error in form.email.errors %}
                    <div class="alert alert-error">
                        <p class="field-error"><i class="fa fa-exclamation-circle" aria-hidden="true"></i>{{ error|escape }}</p>
                    </div>
                {% endfor %}
                <div class="col-sm-2">
                    <button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmail()" id="submit-notify-email">Notify Me</button>

                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal" tabindex="-1" role="dialog" id="thanks">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Thank you</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>We would like to thank you for your interest.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<script>
    function addNotifyEmail(e){
        var notifyEmailForm = $("#notify-email-form");
        var thanksModal = $("#thanks");

        $.ajax({
        type: 'POST',
        url: '/notify-email/add/',
        data: notifyEmailForm.serialize(),
        success: function(res){
                   thanksModal.modal('show')}

    })}
</script>

Answer 1

我不确定我是否理解你的问题。

所以，问题是如果您有一些验证错误，它们会出现在您的“错误”div 中，只有当您将它们悬停时？如果是，那么它与您的css 或javascript 有关。检查您的脚本和 css 文件。也许你在某个地方触发了.field-error 元素。

关于模态外观。嗯，这是关于您的AJAX 请求。

在您的代码中，无论如何您都会显示您的模式，而HTTP Request 将得到 200 代码的答案。这意味着即使您没有有效的表单，您也可以将一些消息发送回JsonResponse，并将其带回您的页面，这意味着您的脚本每次都会触发success，这就是您的模态出现的原因。

不要只是发送一些JsonResponse({"msg": "Error"})，而是尝试使用它来处理错误。

function addNotifyEmail(e){
    var notifyEmailForm = $("#notify-email-form");
    var thanksModal = $("#thanks");

    $.ajax({
    type: 'POST',
    url: '/notify-email/add/',
    data: notifyEmailForm.serialize(),
    success: function(res){
        if(res.msg !== "Error") {
               thanksModal.modal('show');
        }
    }
})}

查看here，了解有关在AJAX 请求中处理错误的更多详细信息。