better error handling for signup languages field (#155)

UiL-OTS-labs · Dec 22, 2023 · 0d0ee51 · 0d0ee51
1 parent 9b68558
commit 0d0ee51
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 10 deletions.
diff --git a/parent/parent/forms.py b/parent/parent/forms.py
@@ -9,13 +9,27 @@
     TemplatedFormTextField,
 )
 from django import forms
+from django.core.exceptions import ValidationError
 from django.utils.safestring import mark_safe
 from django.utils.translation import gettext_lazy as _
 
 
 class LanguagesWidget(forms.widgets.SelectMultiple):
     template_name = "widgets/languages_widget.html"
 
+    def get_context(self, name, value, attrs):
+        context = super().get_context(name, value, attrs)
+        if value is None:
+            return context
+
+        if value == ["Nederlands"]:
+            context["mono_dutch_checked"] = True
+        elif len(value) == 1:
+            context["mono_other_checked"] = True
+        elif len(value) > 1:
+            context["multi_checked"] = True
+        return context
+
     def value_from_datadict(self, data, files, name):
         value = data.getlist(name)
         return value
@@ -27,10 +41,17 @@ def to_python(self, value):
         if isinstance(v, str):
             v = [v]
 
-        return list(filter(None, v))  # remove empty values (TODO: why are they here to begin with?)
+        return list(filter(lambda x: x is not None and len(x), v))  # remove empty values
 
     def valid_value(self, value):
-        return isinstance(value, str)
+        return isinstance(value, str) and len(value) > 1
+
+    def validate(self, value):
+        super().validate(value)
+
+        if len(value) < 1:
+            # no languages
+            raise ValidationError(_("parent:forms:languages:error:missing"))
 
 
 def get_valid_year_range():
@@ -79,8 +100,7 @@ class SignupForm(TemplatedForm):
         widget=BootstrapRadioSelect(),
     )
     languages = LanguagesField(
-        # TODO: this should use a custom field object to support new values that are not part of the predetermined choices
-        # but it should still support prepopulating with known
+        required=True,
         label=_("parent:forms:signup:languages"),
         widget=LanguagesWidget,
         choices=[],

diff --git a/parent/parent/templates/widgets/languages_widget.html b/parent/parent/templates/widgets/languages_widget.html
@@ -1,13 +1,17 @@
 {% load i18n %}
-<div class="form-check">
-    <input class="form-check-input" id="id_languages_mono_dutch" type="radio" name="languages" value="Nederlands" />
+<div class="form-check {{ widget.attrs.valid }}">
+    <input class="form-check-input" id="id_languages_mono_dutch" type="radio" name="languages" value="Nederlands"
+           {% if mono_dutch_checked %}checked{% endif %}
+    />
     <label class="form-check-label" for="id_languages_mono_dutch">
         {% translate 'parent:forms:signup:languages:mono_dutch' %}
     </label>
 </div>
 
-<div class="form-check">
-    <input class="form-check-input" id="id_languages_mono_other" type="radio" name="languages" value="" />
+<div class="form-check {{ widget.attrs.valid }}">
+    <input class="form-check-input" id="id_languages_mono_other" type="radio" name="languages" value=""
+           {% if mono_other_checked %}checked{% endif %}
+    />
     <label class="form-check-label" for="id_languages_mono_other">
         {% translate 'parent:forms:signup:languages:mono_other' %}
     </label>
@@ -25,8 +29,10 @@
     </select>
 </div>
 
-<div class="form-check">
-    <input class="form-check-input" id="id_languages_multi" type="radio" name="languages" value="" />
+<div class="form-check {{ widget.attrs.valid }}">
+    <input class="form-check-input" id="id_languages_multi" type="radio" name="languages" value=""
+           {% if multi_checked %}checked{% endif %}
+    />
     <label class="form-check-label" for="id_languages_multi">
         {% translate 'parent:forms:signup:languages:multi' %}
     </label>
@@ -45,6 +51,8 @@
 
 <script type="text/javascript" nonce="{{ request.csp_nonce }}">
     $(function () {
+        $('#id_languages_multi_select').prop('disabled', !$('#id_languages_multi').prop('checked'));
+        $('#id_languages_mono_select').prop('disabled', !$('#id_languages_mono_other').prop('checked'));
         $('input[type=radio]').change(() => {
             $('#id_languages_multi_select').prop('disabled', !$('#id_languages_multi').prop('checked'));
             $('#id_languages_mono_select').prop('disabled', !$('#id_languages_mono_other').prop('checked'));