Review feedback too numerous to mention

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -100,3 +100,9 @@ footer {
   //Workaround because USWDS units jump from 10 to 15
   margin-top: units(10) + units(2);
 }
+
+abbr[title] {
+  // workaround for underlining abbr element
+  border-bottom: none;
+  text-decoration: none;
+}

src/registrar/forms/application_wizard.py

@@ -7,9 +7,11 @@ import logging
 from typing import Union
 
 from django import forms
+from django.core.validators import RegexValidator
 from django.shortcuts import render
 from django.contrib.auth.mixins import LoginRequiredMixin
 from django.urls import resolve
+from django.utils.safestring import mark_safe
 
 from formtools.wizard.views import NamedUrlSessionWizardView  # type: ignore
 from formtools.wizard.storage.session import SessionStorage  # type: ignore
@@ -22,6 +24,11 @@ from registrar.models import Contact, DomainApplication, Domain
 logger = logging.getLogger(__name__)
 
 
+REQUIRED_SUFFIX = mark_safe(
+    ' <abbr class="usa-hint usa-hint--required" title="required">*</abbr>'
+)
+
+
 class RegistrarForm(forms.Form):
     """Subclass used to remove the default colon suffix from all fields."""
 
@@ -52,6 +59,7 @@ class OrganizationTypeForm(RegistrarForm):
         required=True,
         choices=DomainApplication.OrganizationChoices.choices,
         widget=forms.RadioSelect,
+        error_messages={"required": "This question is required."},
     )
 
 
@@ -59,19 +67,32 @@ class OrganizationFederalForm(RegistrarForm):
     federal_type = forms.ChoiceField(
         choices=DomainApplication.BranchChoices.choices,
         widget=forms.RadioSelect,
+        error_messages={"required": "This question is required."},
     )
 
 
 class OrganizationElectionForm(RegistrarForm):
-    is_election_board = forms.BooleanField(
+    is_election_board = forms.NullBooleanField(
         widget=forms.RadioSelect(
             choices=[
                 (True, "Yes"),
                 (False, "No"),
             ],
         ),
+        required=False,  # use field validation to require an answer
     )
 
+    def clean_is_election_board(self):
+        """This box must be checked to proceed but offer a clear error."""
+        # already converted to a boolean
+        is_election_board = self.cleaned_data["is_election_board"]
+        if is_election_board is None:
+            raise forms.ValidationError(
+                "Please select Yes or No.",
+                code="required",
+            )
+        return is_election_board
+
 
 class OrganizationContactForm(RegistrarForm):
     # for federal agencies we also want to know the top-level agency.
@@ -81,19 +102,35 @@ class OrganizationContactForm(RegistrarForm):
         # it is a federal agency.
         required=False,
         choices=DomainApplication.AGENCY_CHOICES,
+        label_suffix=REQUIRED_SUFFIX,
+    )
+    organization_name = forms.CharField(
+        label="Organization Name", label_suffix=REQUIRED_SUFFIX
+    )
+    address_line1 = forms.CharField(
+        label="Street address",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    organization_name = forms.CharField(label="Organization Name")
-    address_line1 = forms.CharField(label="Street address")
     address_line2 = forms.CharField(
         required=False,
         label="Street address line 2",
     )
-    city = forms.CharField(label="City")
+    city = forms.CharField(label="City", label_suffix=REQUIRED_SUFFIX)
     state_territory = forms.ChoiceField(
         label="State, territory, or military post",
         choices=[("", "--Select--")] + DomainApplication.StateTerritoryChoices.choices,
+        label_suffix=REQUIRED_SUFFIX,
+    )
+    zipcode = forms.CharField(
+        label="ZIP code",
+        label_suffix=REQUIRED_SUFFIX,
+        validators=[
+            RegexValidator(
+                "^[0-9]{5}(?:-[0-9]{4})?$|^$",
+                message="Please enter a ZIP code in the form 12345 or 12345-6789",
+            )
+        ],
     )
-    zipcode = forms.CharField(label="ZIP code")
     urbanization = forms.CharField(
         required=False,
         label="Urbanization (Puerto Rico only)",
@@ -120,17 +157,31 @@ class AuthorizingOfficialForm(RegistrarForm):
         if contact is not None:
             super().from_database(contact)
 
-    first_name = forms.CharField(label="First name/given name")
+    first_name = forms.CharField(
+        label="First name/given name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
     middle_name = forms.CharField(
         required=False,
-        label="Middle name (optional)",
+        label="Middle name",
+    )
+    last_name = forms.CharField(
+        label="Last name/family name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
+    title = forms.CharField(
+        label="Title or role in your organization",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    last_name = forms.CharField(label="Last name/family name")
-    title = forms.CharField(label="Title or role in your organization")
     email = forms.EmailField(
-        label="Email", error_messages={"invalid": "Please enter a valid email address."}
+        label="Email",
+        label_suffix=REQUIRED_SUFFIX,
+        error_messages={"invalid": "Please enter a valid email address."}
+    )
+    phone = PhoneNumberField(
+        label="Phone",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    phone = PhoneNumberField(label="Phone")
 
 
 class CurrentSitesForm(RegistrarForm):
@@ -164,6 +215,11 @@ class CurrentSitesForm(RegistrarForm):
             return inputted_site
 
         # something has been inputted
+
+        if inputted_site.startswith("http://") or inputted_site.startswith("https://"):
+            # strip of the protocol that the pasted from their web browser
+            inputted_site = inputted_site.split("//", 1)[1]
+
         if Domain.string_could_be_domain(inputted_site):
             return inputted_site
         else:
@@ -247,7 +303,11 @@ class DotGovDomainForm(RegistrarForm):
 
 
 class PurposeForm(RegistrarForm):
-    purpose = forms.CharField(label="Purpose", widget=forms.Textarea())
+    purpose = forms.CharField(
+        label="Purpose",
+        widget=forms.Textarea(),
+        error_messages={"required": "You must enter some information about the purpose of your domain"}
+    )
 
 
 class YourContactForm(RegistrarForm):
@@ -270,17 +330,31 @@ class YourContactForm(RegistrarForm):
         if contact is not None:
             super().from_database(contact)
 
-    first_name = forms.CharField(label="First name/given name")
+    first_name = forms.CharField(
+        label="First name/given name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
     middle_name = forms.CharField(
         required=False,
-        label="Middle name (optional)",
+        label="Middle name",
+    )
+    last_name = forms.CharField(
+        label="Last name/family name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
+    title = forms.CharField(
+        label="Title or role in your organization",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    last_name = forms.CharField(label="Last name/family name")
-    title = forms.CharField(label="Title or role in your organization")
     email = forms.EmailField(
-        label="Email", error_messages={"invalid": "Please enter a valid email address."}
+        label="Email",
+        label_suffix=REQUIRED_SUFFIX,
+        error_messages={"invalid": "Please enter a valid email address."}
+    )
+    phone = PhoneNumberField(
+        label="Phone",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    phone = PhoneNumberField(label="Phone")
 
 
 class OtherContactsForm(RegistrarForm):
@@ -305,17 +379,32 @@ class OtherContactsForm(RegistrarForm):
         if other_contacts is not None:
             super().from_database(other_contacts)
 
-    first_name = forms.CharField(label="First name/given name")
+
+    first_name = forms.CharField(
+        label="First name/given name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
     middle_name = forms.CharField(
         required=False,
-        label="Middle name (optional)",
+        label="Middle name",
+    )
+    last_name = forms.CharField(
+        label="Last name/family name",
+        label_suffix=REQUIRED_SUFFIX,
+    )
+    title = forms.CharField(
+        label="Title or role in your organization",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    last_name = forms.CharField(label="Last name/family name")
-    title = forms.CharField(label="Title or role in your organization")
     email = forms.EmailField(
-        label="Email", error_messages={"invalid": "Please enter a valid email address."}
+        label="Email",
+        label_suffix=REQUIRED_SUFFIX,
+        error_messages={"invalid": "Please enter a valid email address."}
+    )
+    phone = PhoneNumberField(
+        label="Phone",
+        label_suffix=REQUIRED_SUFFIX,
     )
-    phone = PhoneNumberField(label="Phone")
 
 
 class SecurityEmailForm(RegistrarForm):

src/registrar/templates/application_authorizing_official.html

@@ -19,9 +19,9 @@
   <p>We’ll contact your authorizing official to let them know that you made this request and to double check that they approve it.</p> 
 </div>
 
-<p>All fields are required unless they are marked optional.</p>
+{% include "includes/required_fields.html" %}
 
-<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post">
+<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 

src/registrar/templates/application_org_contact.html

@@ -13,10 +13,10 @@
 
   <p>If your domain request is approved, the name of your organization will be publicly listed as the domain registrant. </p>
 
-  <p>All fields are required unless they are marked optional.</p>
+  {% include "includes/required_fields.html" %}
 </div>
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 
@@ -24,8 +24,7 @@
     <legend class="usa-sr-only">What is the name and mailing address of your organization?</legend>
 
     {% if is_federal %}
-        {{ wizard.form.federal_agency|add_label_class:"usa-label" }}
+        {% select_with_errors wizard.form.federal_agency required=True %}
-        {{ wizard.form.federal_agency|add_class:"usa-select" }}
     {% endif %}
 
     {% input_with_errors wizard.form.organization_name %}
@@ -36,8 +35,7 @@
 
     {% input_with_errors wizard.form.city %}
 
-    {{ wizard.form.state_territory|add_label_class:"usa-label" }}
+    {% select_with_errors wizard.form.state_territory %}
-    {{ wizard.form.state_territory|add_class:"usa-select" }}
 
     {% input_with_errors wizard.form.zipcode add_class="usa-input--small" %}
 

src/registrar/templates/application_org_election.html

@@ -5,16 +5,17 @@
 
 {% block form_content %}
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
   <fieldset id="election_board__fieldset" class="usa-fieldset">
     <legend>
       <h2 class="margin-bottom-05">Is your organization an election office?</h2>
+      <p> This question is required.</p>
     </legend>
     {% radio_buttons_by_value wizard.form.is_election_board as choices %}
     {% for choice in choices.values %}
-      {% include "includes/radio_button.html" with choice=choice tile="true" %}
+      {% include "includes/radio_button.html" with choice=choice tile="true" required="true"%}
     {% endfor %}
   </fieldset>
 

src/registrar/templates/application_org_federal.html

@@ -5,7 +5,7 @@
 
 {% block form_content %}
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
   <fieldset id="federal_type__fieldset" class="usa-fieldset">

src/registrar/templates/application_org_type.html

@@ -5,7 +5,7 @@
 
 {% block form_content %}
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 
@@ -13,9 +13,9 @@
 
   <fieldset id="organization_type__fieldset" class="usa-fieldset">
     <legend class="usa-legend">
-      <h2> What kind of U.S.-based government organization do you represent?</h2>
+      <h2> What kind of U.S.-based government organization do you represent?  </h2>
+      <p>This question is required.</p>
     </legend>
-    {{ wizard.form.organization_type.errors }}
     {% for choice in choices.values %}
       {% include "includes/radio_button.html" with choice=choice tile="true" %}
     {% endfor %}

src/registrar/templates/application_other_contacts.html

@@ -7,9 +7,9 @@
 {% block form_content %}
 
 <p id="instructions">We’d like to contact other employees with administrative or technical responsibilities in your organization. For example, they could be involved in managing your organization or its technical infrastructure. This information will help us assess your eligibility and understand the purpose of the .gov domain. These contacts should be in addition to you and your authorizing official. </p>
-<p>All fields are required unless they are marked optional.</p>
+{% include "includes/required_fields.html" %}
 
-<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post">
+<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 

src/registrar/templates/application_purpose.html

@@ -8,7 +8,7 @@
 
 <p id="instructions">Describe the reason for your domain request. Explain how you plan to use this domain. Will you use it for a website and/or email? Are you moving your website from another top-level domain (like .com or .org)? Read about <a href="#">activities that are prohibited on .gov domains.</a></p>
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   <div class="usa-form-group">
     {{ wizard.management_form }}
     {% csrf_token %}

src/registrar/templates/application_requirements.html

@@ -127,7 +127,7 @@
 
 <h2>Acknowledgement of .gov domain requirements</h2>
 
-<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post">
+<form id="step__{{wizard.steps.current}}" class="usa-form usa-form--large" method="post" novalidate>
   <div class="usa-form-group">
     {{ wizard.management_form }}
     {% csrf_token %}
@@ -140,13 +140,13 @@
           </span>
         {% endfor %}
         <div class="usa-checkbox"> 
-          {{ wizard.form.is_policy_acknowledged|add_class:"usa-checkbox__input"|add_class:"usa-input--error"|attr:"aria-invalid:true" }}
+          {{ wizard.form.is_policy_acknowledged|add_class:"usa-checkbox__input"|add_class:"usa-input--error"|attr:"aria-invalid:true"|attr:"required" }}
           {{ wizard.form.is_policy_acknowledged|add_label_class:"usa-checkbox__label usa-label--error" }}
         </div>
       </div>
     {% else %}
       <div class="usa-checkbox"> 
-        {{ wizard.form.is_policy_acknowledged|add_class:"usa-checkbox__input"}}
+        {{ wizard.form.is_policy_acknowledged|add_class:"usa-checkbox__input"|attr:"required"}}
         {{ wizard.form.is_policy_acknowledged|add_label_class:"usa-checkbox__label" }}
       </div>
     {% endif %}

src/registrar/templates/application_security_email.html

@@ -7,7 +7,7 @@
 
 <p id="instructions"> We strongly recommend that you provide a security email. This email will allow the public to report observed or suspected security issues on your domain. <strong> Security emails are made public.</strong> We recommend using an alias, like security@&lt;domain.gov&gt;.</p>
 
-<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post">
+<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 

src/registrar/templates/application_your_contact.html

@@ -14,9 +14,9 @@
   <p>The contact information you provide here won’t be public and will only be used for the .gov registry.</p>
 <div>
 
-<p>All fields are required unless they are marked optional.</p>
+{% include "includes/required_fields.html" %}
 
-<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post">
+<form class="usa-form usa-form--large" id="step__{{wizard.steps.current}}" method="post" novalidate>
   {{ wizard.management_form }}
   {% csrf_token %}
 

src/registrar/templates/includes/input_with_errors.html

@@ -13,9 +13,17 @@ error messages, if necessary.
       {{ error }}
     </span>
   {% endfor %}
-  {{ field|add_class:input_class|add_class:"usa-input--error"|attr:"aria-invalid:true" }}
+  {% if required %}
+    {{ field|add_class:input_class|add_class:"usa-input--error"|attr:"aria-invalid:true"|attr:"required" }}
+  {% else %}
+    {{ field|add_class:input_class|add_class:"usa-input--error"|attr:"aria-invalid:true" }}
+  {% endif %}
   </div>
 {% else %}
   {{ field|add_label_class:"usa-label" }}
-  {{ field|add_class:input_class }}
+  {% if required %}
+    {{ field|add_class:input_class|attr:"required" }}
+  {% else %}
+    {{ field|add_class:input_class }}
+  {% endif %}
 {% endif %}

src/registrar/templates/includes/radio_button.html

@@ -5,7 +5,7 @@
     value="{{ choice.data.value }}"
     class="usa-radio__input {% if tile %}usa-radio__input--tile {%endif%}"
     id="{{ choice.id_for_label }}"
-    {% if choice.data.attrs.required %}required{% endif %}
+    {% if choice.data.attrs.required or required %}required{% endif %}
     {% if choice.data.selected %}checked{% endif %}
     />
     <label class="usa-radio__label" for="{{ choice.id_for_label }}" >

src/registrar/templates/includes/required_fields.html

@@ -0,0 +1,3 @@
+  <p>
+    Required fields are marked with an asterisk (<abbr class="usa-hint usa-hint--required" title="required">*</abbr>).
+  </p>

src/registrar/templatetags/field_helpers.py

@@ -5,6 +5,15 @@ from django import template
 register = template.Library()
 
 
+def _field_context(field, input_class, add_class, required=False):
+    if add_class:
+        input_class += " " + add_class
+    context = {"field": field, "input_class": input_class}
+    if required:
+        context["required"] = True
+    return context
+
+
 @register.inclusion_tag("includes/input_with_errors.html")
 def input_with_errors(field, add_class=None):
     """Make an input field along with error handling.
@@ -12,7 +21,14 @@ def input_with_errors(field, add_class=None):
     field is a form field instance. add_class is a string of additional
     classes (space separated) to add to "usa-input" on the <input> field.
     """
-    input_class = "usa-input"
+    return _field_context(field, "usa-input", add_class)
-    if add_class:
+
-        input_class += " " + add_class
+
-    return {"field": field, "input_class": input_class}
+@register.inclusion_tag("includes/input_with_errors.html")
+def select_with_errors(field, add_class=None, required=False):
+    """Make a select field along with error handling.
+
+    field is a form field instance. add_class is a string of additional
+    classes (space separated) to add to "usa-select" on the field.
+    """
+    return _field_context(field, "usa-select", add_class, required)

src/registrar/tests/test_forms.py

@@ -6,6 +6,7 @@ from registrar.forms.application_wizard import (
     CurrentSitesForm,
     DotGovDomainForm,
     AuthorizingOfficialForm,
+    OrganizationContactForm,
     YourContactForm,
     OtherContactsForm,
     SecurityEmailForm,
@@ -14,6 +15,17 @@ from registrar.forms.application_wizard import (
 
 
 class TestFormValidation(TestCase):
+    def test_org_contact_zip_invalid(self):
+        form = OrganizationContactForm (data={"zipcode": "nah"})
+        self.assertEqual(
+            form.errors["zipcode"], ["Please enter a ZIP code in the form 12345 or 12345-6789"]
+        )
+
+    def test_org_contact_zip_valid(self):
+        for zipcode in ["12345", "12345-6789"]:
+            form = OrganizationContactForm (data={"zipcode": zipcode})
+            self.assertNotIn("zipcode", form.errors)
+
     def test_current_site_invalid(self):
         form = CurrentSitesForm(data={"current_site": "nah"})
         self.assertEqual(
@@ -24,6 +36,12 @@ class TestFormValidation(TestCase):
         form = CurrentSitesForm(data={"current_site": "hyphens-rule.gov.uk"})
         self.assertEqual(len(form.errors), 0)
 
+    def test_current_site_scheme_valid(self):
+        form = CurrentSitesForm(data={"current_site": "http://hyphens-rule.gov.uk"})
+        self.assertEqual(len(form.errors), 0)
+        form = CurrentSitesForm(data={"current_site": "https://hyphens-rule.gov.uk"})
+        self.assertEqual(len(form.errors), 0)
+
     def test_requested_domain_valid(self):
         """Just a valid domain name with no .gov at the end."""
         form = DotGovDomainForm(data={"requested_domain": "top-level-agency"})