Question

我正在使用JavaScript / jQuery修改FormSet，方法是将表单动态添加到Django FormSet中。例如，我从一个询问用户教育的表格开始。然后，用户可以按下添加按钮以添加相同的表格以输入关于中学教育（例如，研究生院）的信息。表单在浏览器中添加，我可以输入数据，但是当我发布数据时，它只在FormSet中显示一个表单，其中包含浏览器中第二个表单的信息。

发布数据

edu-0-degree    u'Doctorate'
first_name  u'User' 
last_name   u'One'
Submit  u'Submit'
edu-0-date_started  u'01/01/12'
edu-MIN_NUM_FORMS   u'0'
edu-0-school    u'School Two'
edu-INITIAL_FORMS   u'0'
edu-MAX_NUM_FORMS   u'1000'
edu-0-date_finished u'01/01/16'
edu-0-id    u''
edu-TOTAL_FORMS u'2'
csrfmiddlewaretoken u'qgD2supjYURWoKArWOmkiVRoBPF6Shw0'

然后我收到错误说：

ValidationError: [u'ManagementForm data is missing or has been tampered with']。

以下是相关的代码：

views.py

def build_profile(request):
    EducationFormset = modelformset_factory(EducationModel, AddEducationForm, extra=1)

    if request.method == "POST":

        education_formset = EducationFormset(request.POST, prefix='edu')
        for form in education_formset:
            if form.is_valid() and form.has_changed():
                education = EducationModel(
                    school = form.cleaned_data['school'],
                    date_started = form.cleaned_data['date_started'],
                    date_finished = form.cleaned_data['date_finished'],
                    degree = form.cleaned_data['degree'],
                    user = current_user
                )
                education.save()

        return HttpResponseRedirect(reverse('private', args=[current_user.username]))

    context = { 
        'edu_formset' : forms['education'],
    }

    return render(request, "build_profile.html", context)

（在这里，我尝试使用和不使用form.has_changed()的相同结果。）

模板build_profile.html

<h2>Education</h2>
{{ edu_formset.management_form }}
{% for form in edu_formset.forms %}
    <div id="{{ form.prefix }}-row" class="dynamic-form">
        {{ form|crispy }}
        <div {% if forloop.first %} class="hidden" {% endif %}>
            <button type="button" class="btn btn-default btn-sm delete-row">
                <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>
            </button>
        </div>
    </div>
{% endfor %}
<div class="btn-group btn-group-xs" role="group" aria-label="...">
    <button type="button" class="btn btn-default add-row">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
    </button>
</div>

build_profile.js （将表单动态添加到FormSet的代码）

function updateElementIndex(el, prefix, ndx) {

    var id_regex = new RegExp('(' + prefix + '-\\d+)');
    var replacement = prefix + '-' + ndx;
    if ($(el).attr("for")) $(el).attr("for", $(el).attr("for").replace(id_regex, replacement));
    if (el.id) el.id = el.id.replace(id_regex, replacement);
    if (el.name) el.name = el.name.replace(id_regex, replacement);

}

function addForm(btn, prefix) {

    var formCount = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val());
    var row = $('.dynamic-form:first').clone(true).get(0);
    $(row).removeAttr('id').insertAfter($('.dynamic-form:last')).children('.hidden').removeClass('hidden');
    $(row).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, formCount);
        $(this).val('');
    });
    $(row).find('.delete-row').click(function() {
        deleteForm(this, prefix);
    });
    $('#id_' + prefix + '-TOTAL_FORMS').val(formCount + 1);
    return false;

}

function deleteForm(btn, prefix) {

    $(btn).parents('.dynamic-form').remove();
    var forms = $('.dynamic-form');
    $('#id_' + prefix + '-TOTAL_FORMS').val(forms.length);
    for (var i=0, formCount=forms.length; i<formCount; i++) {
    $(forms.get(i)).children().not(':last').children().each(function() {
        updateElementIndex(this, prefix, i);
    });
}
return false;

}

$(document).ready( function () {

    $('.add-row').click( function () {
        return addForm(this, 'edu')
    });

    $('.delete-row').click( function () {
        return deleteForm(this, 'edu')
    });

});

我做错了什么？

Answer 1

您收到ValidationError，因为edu_TOTAL-FORMS = 2且表格集中只有1个表单位于您的帖子中。在浏览器中查看源代码，并确保表单的名称正确添加前缀。看起来两个表单都有edu-0前缀，当你提交时，只发布表单上的最后一个。

动态添加的Django FormSet数据未发布

1 个答案: