驗證錯誤不會以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請求處理錯誤的詳細信息。