验证错误不会以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}) 

我views.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请求处理错误的详细信息。