使用 axios 进行 Django 表单集验证答案

【问题标题】：Django formset validation with axios使用 axios 进行 Django 表单集验证
【发布时间】：2019-01-26 02:09:11
【问题描述】：

更新 2：我已经放弃了 axios，我确定有办法，现在正在使用 ajax 和来自https://www.webforefront.com/django/formadvancedprocessing.html的一些代码

<script>
    $(document).ready(function () {
        $("#feedbackform").submit(function (event) {
            event.preventDefault();
            $.ajax({
                data: $(this).serialize(),
                type: $(this).attr('method'),
                url: $(this).attr('action'),
                success: function (response) {
                    console.log(response);
                    if (response['success']) {
                        $("#feedbackmessage").html("<div class='alert alert-success'>klasjflaksjf;lkajs;dflkajs;dkflj</div>");
                        $("#feedbackform").addClass("hidden");
                    }
                    if (response['error']) {
                        $("#feedbackmessage").html("<div class='alert alert-danger'>" +
                            response['error']['comment'] + "</div>");
                    }
                },
                error: function (request, status, error) {
                    console.log(request.responseText);
                }
            });
        });
    })
</script>

这是像往常一样验证表单，但即使我有，我也会被重定向到操作 url

$("#feedbackform").submit(function (event) {
        event.preventDefault();

观点：

def error_checking(request):
    print('in error checking')
    if request.POST:
        form = RiderProfileFormSet(request.POST)
        print('made it')
        if form.is_valid():
            print('NOT')
            return JsonResponse({'success': True})
        else:
            print('YES')
            return JsonResponse({'error': form.errors})

我要去哪里穿。

我仍然想学习如何在 axios 中做到这一点。

更新 1：我可以将表单作为字符串获取到视图中，但是对于如何获取管理表单数据进行验证感到困惑。这是我没有运气的尝试。一：

# request_data = json.loads(request.body)['form_to_validate']  # The form as html string
# Error: AttributeError: 'str' object has no attribute 'get'

两个：

# request_data = json.load(request)  # The form as a dict {'form_to_validate': '<form id="reg_form" method.....}
#Error: ValidationError: ['ManagementForm data is missing or has been tampered with']

三个：

# request_data = RiderProfileFormSet(request.POST)
#Error: ValidationError: ['ManagementForm data is missing or has been tampered with']



formset_post = RiderProfileFormSet(request_data)



if formset_post.is_valid():
    print('the formset is valid')

如果我能弄清楚如何将表单验证为字符串或将字符串转换为可与 .is_valid() 一起使用的任何格式。

原创：我已经搜索了几个小时没有运气。另外，我是编程新手。

我正在尝试在 Django 表单集上执行表单验证。

我在一页上有多个动态添加的 (javascript) 表单。当用户提交表单时，如果表单中有错误，则表单会被重定向回注册页面。我正在尝试保留他们的意见。

我的解决方案是通过 axios 执行表单验证。我的问题是我收到 django.core.exceptions.ValidationError: ['ManagementForm data is missing or has been tampered with']

完整的追溯：

[2018 年 8 月 19 日 14:39:42] "GET /event-registration/?event=Lone%20Wolf HTTP/1.1" 200 13455 [2018 年 8 月 19 日 14:39:42]“GET /static/events/style.css HTTP/1.1”200 340 [2018 年 8 月 19 日 14:39:42]“POST /event_formset HTTP/1.1”200 7917 在错误检查中 > 内部服务器错误：/error_checking 回溯（最近一次通话最后）：文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/exception.py”，第 34 行，在内部响应 = get_response（请求） _get_response 中的文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第 126 行 response = self.process_exception_by_middleware(e, request) _get_response 中的文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第 124 行响应 = Wrapped_callback(request, *callback_args, **callback_kwargs) 文件“/Users/shanecheek/Desktop/projects/lobos/events/views.py”，第 164 行，在 error_checking 中如果 formset_post.is_valid(): 文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第 301 行，在 is_valid 自我错误文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第 281 行，错误 self.full_clean() 文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第 322 行，位于 full_clean 对于我在范围内（0，self.total_form_count（））：文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第 110 行，在 total_form_count 返回最小值（self.management_form.cleaned_data[TOTAL_FORM_COUNT]，self.absolute_max） get 中的文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/utils/functional.py”，第 37 行 res = instance.dict[self.name] = self.func(instance) 文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/forms/formsets.py”，第 92 行，在 management_form 代码='missing_management_form', django.core.exceptions.ValidationError: ['ManagementForm 数据丢失或被篡改']

在正常提交时，我没有这个问题。但是，当我调用 vue 方法时：

reveal_pay: function (request) {
let app = this
console.log('called the reveal_pay')
axios.post("{% url 'error_checking' %}",
    {
        headers:
            {
                'X-CSRFToken': '{{ csrf_token }}',
            }
    }
)

    .then(function (response) {
        app.formIsValid = response.data.errors
    })},

我认为原因是我没有正确提交表单，没有将正确的数据传递给函数：

def error_checking(request):
    print('in error checking')
    print(request.POST.get)
    formset_post = RiderProfileFormSet(request.POST)
    # formset_post = json.loads(request.body)['form_to_validate']
    print(formset_post)

    if formset_post.is_valid():
        print('the formset is valid')
        print('passing to event_register')
        event_register(request)
    else:
        print('formset not valid')
        print(formset_post.errors)
        errors = formset_post.errors
        args = {'errors': errors}
        return JsonResponse(args)

我尝试通过 js (form_to_validate = document.getElementById('reg_form')) 获取表单并将其传递到正文中，但是当我尝试将其用作表单集时，出现错误：AttributeError: 'str'对象没有属性“错误”

[19/Aug/2018 15:31:02] “GET /event-registration/?event=Lone%20Wolf HTTP/1.1" 200 13464 [19/Aug/2018 15:31:02]"获取 /static/events/style.css HTTP/1.1" 200 340 [19/Aug/2018 15:31:02] "POST /event_formset HTTP/1.1" 200 7917 错误检查 > form_to_validate 内部服务器错误：/error_checking Traceback（最近调用最后）：文件 "/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/exception.py", 第 34 行，在内部 response = get_response（请求）文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第 126 行，在 _get_response 中 response = self.process_exception_by_middleware（e，request）文件“/Library/Frameworks/Python.framework/Versions/3.6/lib/python3.6/site-packages/django/core/handlers/base.py”，第 124 行，在 _get_response response = Wrapped_callback(request, *callback_args, **callback_kwargs) 文件“/Users/shanecheek/Desktop/projects/lobos/events/views.py”，第 171 行，在错误检查中 errors = formset_post.errors AttributeError: 'str' object has no attribute 'errors'

模板：

<form id='reg_form' class="form-horizontal" method="POST">
    {% csrf_token %}
    {{ formset.management_form }}
    <div style="background-color: black; padding: 20px 60px 20px 60px; margin-right: 15px;"
         class="row form-row">
        <div class="input-group">
            <div v-for="form in formList">
                <br>
                <div style="background-color: #ffe673; padding: 20px" v-html="form">
                </div>
            </div>
            <div style="padding-left: 60px; background-color: black">
                <p v-on:click="addForm" class="btn btn-primary btn-lg">Add Form</p>
                <p v-on:click="formID" class="btn btn-primary btn-lg">Delete Form</p>
                <p v-on:click="totalCost" class="btn btn-primary btn-lg">Total Cost</p>

            </div>

            <br>

            <br>
        </div>
    </div>
    <div style="margin: 0px 15px 100px -15px; padding: 0px 0px 60px 60px; background-color: black">
        {#<button id="form_submit_button" style="" type="submit" class="btn btn-primary btn-lg">Finish Registration</button>#}
        <div id="form_submit_button" v-on:click="reveal_pay"class="btn btn-primary btn-lg">AXIOS Finish Registration</div>
        <div class="btn btn-primary btn-lg">
            <paypal-checkout
                    :amount='amountStr'
                    currency="USD"
                    :button-style="aStyle"
                    :client="paypal"
                    env="sandbox"
                    v-on:payment-authorized="paymentAuthorized"
                    v-on:payment-completed="paymentCompleted"
                    v-on:payment-cancelled="paymentCancelled">
            </paypal-checkout>
        </div>
    </div>
</form>

如果您需要其他信息，请告诉我。第一次在这里提问。 -谢谢！

【问题讨论】：

标签： python jquery ajax django axios

【解决方案1】：

长话短说。 Django 获取一个 JSON 对象，然后将其传递给视图中的 modelformset 对象。我就是这样做的：

表格：

<form v-on:submit.prevent="the3DayMethod" method="POST" id="feedbackform">
    {% csrf_token %}
    {{ formset.management_form }}
    <div style="background-color: black; padding: 20px 60px 20px 60px; margin-right: 15px;"
         class="row form-row">
        <div class="input-group">
            <div v-for="form in formList">
                <br>
                <div style="background-color: #ffe673; padding: 20px" v-html="form">
                </div>
            </div>
            <div style="padding-left: 60px; background-color: black">
                <p v-on:click="addForm" class="btn btn-primary btn-lg">Add Form</p>
                <p v-on:click="formID" class="btn btn-primary btn-lg">Delete Form</p>
            </div>
            <br>
        </div>
    </div>
    <div style="margin: 0px 15px 100px -15px; padding: 0px 0px 60px 60px; background-color: black">
        <div v-show="formIsValid === 'False'">
            <input v-on:click="the3DayMethod" class="btn btn-primary" value=" Check for Errors">
        </div>
        <div v-show="formIsValid === 'True'" class="btn btn-primary btn-lg">
            <paypal-checkout
                    :amount='amountStr'
                    currency="USD"
                    :button-style="aStyle"
                    :client="paypal"
                    env="sandbox"
                    v-on:payment-authorized="paymentAuthorized"
                    v-on:payment-completed="paymentCompleted"
                    v-on:payment-cancelled="paymentCancelled">
            </paypal-checkout>
        </div>
    </div>
</form>

Vue 方法/Axios：

the3DayMethod: function () {
    let app = this
    var object = {}
    forms = document.getElementById('feedbackform')

    var formData = new FormData(forms),
        result = {};
    for (var entry of formData.entries()) {
        result[entry[0]] = entry[1];
    }
    data = JSON.stringify(result)
    console.log(result);
    console.log('called the the3DayMethod')


    axios.post("{% url 'error_checking' %}",
        data,
        {
            headers:
                {
                    'X-CSRFToken': '{{ csrf_token }}',
                }
        }
    )
        .then(function (response) {
            app.formIsValid = response.data.errors
        })
},

Django 视图：

def error_checking(request):

    forms = json.load(request)

    formset = RiderProfileFormSet(forms)

    if formset.is_valid():
        print('VALID')
        v = {'success': "True"}
        return JsonResponse(v)
    else:
        print('NOT VALID')
        v = {'error': formset.errors}
        return JsonResponse(v)

【讨论】：