在 JavaScript 中访问更新表单的元素

Question

我有一个用于更新找到的项目的表单。该表单通过视图扩展了 Django 的 UpdateView。更新丢失物品和更新找到物品的表单使用相同的模板，但具有不同的视图和表单。它们共享相同的模板，因为大多数字段都相同。

我正在尝试为表单添加一些自定义表单验证，以特别更新找到的项目。此验证特定于找到的物品，不适用于丢失的物品。我在FoundUpdateForm 中的一个干净函数中进行了验证，该函数检查是否满足所需条件，如果不满足条件则引发 ValidationError。即使这里有验证，我也想将其添加到 JavaScript 文件中。

我尝试在与表单上的元素相关联的 JavaScript 文件中创建变量，但没有成功。我试过使用var staff_type = document.getElementById('staff_type')、var staff_type = document.getElementById('FoundUpdateForm').elements.namedItem('staff_type') 和其他一些变体。我正在处理的主要问题是如何在没有 ID 的情况下获取表单。我已经研究过在 forms.py 中为表单分配一个 ID，但从我的发现来看，至少它似乎不能以这种方式完成。

我想尽可能避免添加到模板中，因为如前所述，该模板被多个表单使用。此外，由于表单扩展了 UpdateView 模板，因此该模板能够使用 {{ form.as_p }} 使用 p 标签呈现表单的字段。因为元素是以这种方式呈现到页面的，所以 Django 为每个元素分配了自己的 ID，但表单本身没有分配一个。

forms.py：

class FoundUpdateForm(ModelForm):
    Found._meta.get_field('staff_type').formfield(widget=forms.RadioSelect())

    def clean(self):
        cleaned_data = super(FoundUpdateForm, self).clean()
        staff_type = cleaned_data.get('staff_type')
        witness = cleaned_data.get('witness')
        res_type = cleaned_data.get('res_type')
        name_of_the_individual_claiming_item = cleaned_data.get('name_of_the_individual_claiming_item')
        phone_number = cleaned_data.get('phone_number')

        if not staff_type:
            raise forms.ValidationError("Please fill out Type of Employee Resolving Item.")

        if staff_type == 'student' and not witness:
            raise forms.ValidationError("Student staff resolving lost items are required to have a witness.")

        if res_type.name == 'Picked up':
            if not name_of_the_individual_claiming_item:
                raise forms.ValidationError("If person is picking up item, the individual's name is required.")
            if not phone_number:
                raise forms.ValidationError("If person is picking up item, the individual's phone number is required.")
            if not witness:
                raise forms.ValidationError("If person is picking up item, a witness is required.")

    class Meta:
        model = Found
        fields = ['name_of_the_individual_claiming_item', 'phone_number', 'staff_type', 'witness', 'item_name', 'description', 'location', 'date_found', 'res_type', 'date_resolved']

        widgets = {
            'date_found': DateInput(attrs=date_attrs),
            'date_resolved': DateInput(attrs=date_attrs),
            'staff_type': forms.RadioSelect

        }

item_update.html：

{% extends "admin/base_site.html" %}
{% load static %}
{% load i18n %}
{% load in_group %}

{% block content %}

<script src="{% static 'lostfound.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'admin/css/forms.css' %}">

<script>
$(document).ready(function() {
  $(".datepicker").datepicker({
    dateFormat: 'yy-mm-dd',
  });

});
</script>

<fieldset class="well">
    <form action="" method="post">{% csrf_token %}
        {{ form.as_p }}
        <input class="btn btn-primary" type="submit" value="Update" />
    </form>
</fieldset>


{% endblock content %}

views.py：

class FoundUpdate(UpdateView):
    model = Found
    template_name = 'lostfound/item_update.html'
    success_url = reverse_lazy('found_list')
    form_class = FoundUpdateForm

    def form_valid(self, form):
        item = form.save()
        LogEntry.objects.create(
                user_id         = self.request.user.pk,
                content_type_id = ContentType.objects.get_for_model(Found).pk,
                object_id       = item.pk,
                object_repr     = item,
                action_flag     = 2,
                change_message  = 'Update Found Item'
            )

        return redirect('found_list')

    def get_context_data(self, **kwargs):
        context = super(FoundUpdate, self).get_context_data(**kwargs)
        context['title'] = 'Change found'
        context['log_entries'] = get_object_history_list(self.model, self.get_object().pk)
        return context

注意：我使用的是 Django 1.11

Answer 1

将表单包装在 <div> 中并为该 div 指定一个类，例如 <div class="MySpecialForm">。然后，您可以通过引用具有该特定类的 div 内的表单来找到（django 生成的）表单（如果您想要防弹，请检查它是否是唯一的）。一般来说，将某些内容包装在 div 中对其显示没有影响，除非 div 类对某些东西是特殊的（例如 Bootstrap）。 $('div.MySpecialForm form')（或类似的东西，我不经常使用 JQuery 选择器来成为它们的知识源泉！）

除非页面中可能有 >1 个表单，否则您不需要这个，但是如果您尝试编写尽可能通用的 JS，您确实应该允许这种可能性。

您还应该考虑模板和子模板，使用基本模板定义相对于任何特定视图和一些空块（或显示“编程错误，您忘记覆盖块 foobar”的块）不变的部分）。子模板做

{% 扩展了 "where/whatever.html" %} {% 阻止某事 %} 东西 {% endblock 东西 %} {% 阻止某事_else %} 等等……

这巧妙地将一个视图的细节与特定类型视图的泛型区分开来。