JavaScript 警报框，如果 Django 表单缺少字段

Question

我想在我的 Django 网站应用程序中实现一些 JQuery 元素来使其动态化。

例如，用户正在填写一个表单，并且会出现一个警报框，具体取决于我的 Django 表单是否填写良好。

• 如果 Django 表单填写得很好，它会给出："表单已被创建">

• 如果 Django 表单没有正确填写，它会给出："请看你的表单">

我尝试了一些事情，我的html文件看起来像这样：

    <form class = "form" method='POST' action=''> {% csrf_token %}
        <br></br>
        {{ form.as_p}} <!-- Display child part formulary -->
        <br></br>
        <button onclick="myFunction()">Valider le formulaire</button>
    </form>
        {% if form.is_valid %}
        <script>
        function myFunction() {
            alert("Le formulaire a été créé");
        }
        </script>
        {% else %}
        <script>
        function myFunction() {
            alert("Le formulaire n'a pas été créé car champ(s) invalide(s)");
        }
        </script>
        {% endif %}

我的观点看起来像：

def BirthCertificate_Form_unique_number(request) :
    validity = []
    #User fill some fields
    query_social_number = request.GET.get('social_number')
    query_social_number_father = request.GET.get('social_number_father')
    query_social_number_mother = request.GET.get('social_number_mother')
    if request.method == 'POST':
        form = BirthCertificateForm2(request.POST or None)
        if form.is_valid() :   # Vérification sur la validité des données
            post = form.save()
            return HttpResponseRedirect(reverse('BC_treated2', kwargs={'id': post.id}))
     ...

我如何在我的文件中编写此警报框？

谢谢！

PS ： 我对 JQuery 很陌生。我第一次使用它

编辑：

我尝试了这样的事情，但没有出现警报：

<form class = "form" method='POST' action=''> {% csrf_token %}
                <br></br>
                {{ form.as_p}} <!-- Display child part formulary -->
                <br></br>
                <button type="input">Valider</button>
            </form>

            <script type="text/javascript" >
                $(document).on('Valider', 'form.form', function(form) {
                var $form = $(form);
                $.ajax({
                    url:"/path_to_directory/BC_form2.html",
                    type: "POST",
                    success: function(form) {
                    alert("L'acte de naissance a été créé");
                    }
                });
                });
            </script>

Answer 1

您可以使用 ajax 提交数据以查看，然后验证数据并返回响应的 json。之后，您可以根据您的退货显示警报。您可以根据需要使用$.ajax()、$.get()、$.post()等功能。只要确保你可以根据你从视图的响应来处理 ajax 中的数据。

更新

对于您的编辑案例，您必须了解有关jQuery的更多信息。而不是

$(document).on('Valider', 'form.form', function(form)

你应该

$(document).on('event', 'selector', function(form)

对于event是一种输入或您想要处理的事情，例如，当您要处理单击时，您可以使用click或您可以使用change更改。

对于selector，您从html元素中获得的某种id，类或其他类型。因此，在您的情况下，如果您想使用click事件，代码将是这样的

$(document).on('click', '.btn-validate', function(e){
    var form = $(".form").serialize();
    $.ajax({
        url: "url_on_your_view and already registered in you url.py",
        type: "POST",
        success:function(response){
            alert("L'acte de naissance a été créé");
        }
    });
}

对于您的按钮，您必须更新到

<button type="input" class="btn-validate">Valider</button>