Merge pull request #5725 from opensafely-core/mikerkelly/project-create/form-template-required-attrsf

Add front-end validation to the project create form

Author: mikerkelly

jobserver/migrations/0026_alter_project_number.py

@@ -0,0 +1,32 @@
+# Generated by Django 5.2.12 on 2026-03-23 17:11
+
+import re
+
+import django.core.validators
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("jobserver", "0025_alter_project_copilot_support_ends_at"),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name="project",
+            name="number",
+            field=models.CharField(
+                blank=True,
+                help_text="Project ID can be found in the All Projects spreadsheet. Enter a whole number or use the format POS-20YY-NNNN (for example, POS-2026-2001).",
+                max_length=20,
+                null=True,
+                validators=[
+                    django.core.validators.RegexValidator(
+                        re.compile("^[1-9][0-9]*$|^POS-20[0-9]{2}-[1-9][0-9]{3}$"),
+                        "Enter a whole number or use the format POS-20YY-NNNN (for example, POS-2026-2001).",
+                    )
+                ],
+                verbose_name="Project ID",
+            ),
+        ),
+    ]

jobserver/models/project.py

@@ -30,9 +30,11 @@
 NUMBER_REGEX = re.compile(NUMBER_PATTERN)
 # Either format, wrapping each with ^$ anchors to require full match.
 NUMBER_PATTERN_FULLMATCH = rf"^{DIGITS_PATTERN}$|^{POS_FORMAT_PATTERN}$"
+NUMBER_REGEX_DESCRIPTION = (
+    "Enter a whole number or use the format POS-20YY-NNNN (for example, POS-2026-2001)."
+)
 NUMBER_REGEX_VALIDATOR = RegexValidator(
-    re.compile(NUMBER_PATTERN_FULLMATCH),
-    "Enter a whole number or use the format POS-20YY-NNNN (for example, POS-2026-2001).",
+    re.compile(NUMBER_PATTERN_FULLMATCH), NUMBER_REGEX_DESCRIPTION
 )
 
 
@@ -123,7 +125,10 @@ class Statuses(models.TextChoices):
         blank=True,
         validators=[NUMBER_REGEX_VALIDATOR],
         verbose_name="Project ID",
-        help_text="Project ID can be found in the All Projects spreadsheet.",
+        help_text=(
+            "Project ID can be found in the All Projects spreadsheet. "
+            + NUMBER_REGEX_DESCRIPTION
+        ),
     )
 
     copilot_support_ends_at = models.DateTimeField(null=True, blank=True)

staff/views/projects.py

@@ -23,6 +23,7 @@
 from jobserver.authorization.permissions import Permission
 from jobserver.authorization.utils import roles_for
 from jobserver.models import AuditableEvent, Org, Project, ProjectMembership, User
+from jobserver.models.project import NUMBER_PATTERN
 
 from ..forms import (
     ProjectAddMemberForm,
@@ -47,7 +48,8 @@ def get_context_data(self, **kwargs):
         return super().get_context_data(**kwargs) | {
             "can_create_org": has_permission(
                 user=self.request.user, permission=Permission.ORG_CREATE
-            )
+            ),
+            "number_field_regex": NUMBER_PATTERN,
         }
 
     def get_initial(self):

templates/_components/form/input.html

@@ -37,7 +37,7 @@
 
   <div class="relative">
     <input
-      {% attrs autocapitalize autocomplete autocorrect inputmode name=input_name placeholder required value=input_value|default_if_none:""|escape %}
+      {% attrs autocapitalize autocomplete autocorrect inputmode name=input_name placeholder pattern required value=input_value|default_if_none:""|escape %}
       class="
              mt-1 block w-full rounded-md border-slate-300 text-slate-900 shadow-sm placeholder:text-slate-400
              user-invalid:border-bn-ribbon-600 user-invalid:ring-1 user-invalid:ring-bn-ribbon-600

templates/_components/index.html

@@ -396,6 +396,7 @@ <h3>Input</h3>
         <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode"><code>inputmode</code></a></li>
         <li><code>label</code>: [string] - overwrite the label passed from Django</li>
         <li><code>name</code>: [string] - set the HTML name for the input element</li>
+        <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern"><code>pattern</code></a></li>
         <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder"><code>placeholder</code></a></li>
         <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required"><code>required</code></a></li>
         <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types"><code>type</code></a></li>

templates/staff/project/create.html

@@ -64,8 +64,8 @@ <h3 class="sr-only">Project data</h3>
     {% #card title="Project information" container=True %}
       {% #form_fieldset class="w-full items-stretch gap-y-6" %}
         {% form_legend text="Project information" class="sr-only" %}
-        {% form_input field=form.number %}
-        {% form_input field=form.name %}
+        {% form_input field=form.number pattern=number_field_regex %}
+        {% form_input field=form.name required %}
       {% /form_fieldset %}
     {% /card %}
 
@@ -83,14 +83,14 @@ <h3 class="sr-only">Project data</h3>
             </p>
           {% endif %}
         {% endfragment %}
-        {% form_select field=form.orgs choices=form.fields.orgs.choices selected=form.orgs.value|default_if_none:'' hint_text=select_hint_text hint_extra_class="max-w-full" %}
+        {% form_select field=form.orgs choices=form.fields.orgs.choices selected=form.orgs.value|default_if_none:'' hint_text=select_hint_text hint_extra_class="max-w-full" required %}
       {% /form_fieldset %}
     {% /card %}
 
     {% #card title="Co-pilot details" container=True %}
       {% #form_fieldset class="w-full items-stretch gap-y-6" %}
         {% form_legend text="Co-pilot details" class="sr-only" %}
-        {% form_select field=form.copilot choices=form.fields.copilot.choices selected=form.copilot.value %}
+        {% form_select field=form.copilot choices=form.fields.copilot.choices selected=form.copilot.value required %}
       {% /form_fieldset %}
     {% /card %}
     {% #button variant="success" type="submit" class="self-start" %}