如果 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() 和其他功能。只需确保您可以根据视图的响应处理 ajax 中的数据。

更新

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

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

你应该

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

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

selector 是您从 html 元素中获得的某种 id、class 或其他类型。所以在你的情况下，如果你想使用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>