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

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}))
     ...

如何在我的文件中写入此 AlertBox？

谢谢!

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() 等函数。只需确保您可以根据 View 中的响应处理 ajax 中的数据。

已更新

为了你编辑案例，你必须了解更多关于 jQuery 的知识。而不是

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

你应该

$(document).on('事件', '选择器', 函数(表单)

对于事件是一种输入或您想要处理的事件，例如当您想处理点击时，您可以使用click或您可以进行的更改使用更改。

对于选择器来说，是从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>