Refactor showInputOnErrorFields

This function requires a refactor after incorporating new logic
This commit is contained in:
zandercymatics 2024-05-20 13:37:03 -06:00
parent e5427aadf7
commit cc278b1423
No known key found for this signature in database
GPG key ID: FF4636ABEC9682B7
3 changed files with 39 additions and 30 deletions

View file

@ -919,36 +919,43 @@ function hideDeletedForms() {
} }
function showInputOnErrorFields(){ function showInputOnErrorFields(){
let fullNameButtonClicked = false
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[id$="__edit-button"]').forEach(function(button) { let form = document.querySelector('.main-content-finish-profile');
let fieldIdParts = button.id.split("__") // Get all input elements within the form
if (fieldIdParts && fieldIdParts.length > 0){ let inputs = form ? form.querySelectorAll('input') : null;
let fieldName = fieldIdParts[0] if (!inputs) {
return null;
}
// Check if an error message exists for the given field let fullNameButtonClicked = false
inputs.forEach(function(input) {
let fieldName = input.name;
let errorMessage = document.querySelector(`#id_${fieldName}__error-message`); let errorMessage = document.querySelector(`#id_${fieldName}__error-message`);
if (errorMessage) { if (!fieldName || !errorMessage) {
return null;
}
let editButton = document.querySelector(`#${fieldName}__edit-button`);
console.log(`edit button is ${editButton} vs id #${fieldName}__edit-button`)
if (editButton){
// Show the input field of the field that errored out // Show the input field of the field that errored out
button.click() editButton.click();
}
// If either the full_name field errors out, // If either the full_name field errors out,
// or if any of its associated fields do - show all name related fields. // or if any of its associated fields do - show all name related fields.
let nameFields = ["first_name", "middle_name", "last_name"] let nameFields = ["first_name", "middle_name", "last_name"];
if (nameFields.includes(fieldName) && !fullNameButtonClicked){ if (nameFields.includes(fieldName) && !fullNameButtonClicked){
// Click the full name button if any of its related fields error out // Click the full name button if any of its related fields error out
fullNameButton = document.querySelector("#full_name__edit-button") fullNameButton = document.querySelector("#full_name__edit-button");
if (fullNameButton) { if (fullNameButton) {
fullNameButton.click() fullNameButton.click();
fullNameButtonClicked = true fullNameButtonClicked = true;
}
}
} }
} }
}); });
}); });
} };
// Hookup all edit buttons to the `handleEditButtonClick` function // Hookup all edit buttons to the `handleEditButtonClick` function
setupListener(); setupListener();

View file

@ -11,7 +11,7 @@
<div class="grid-container"> <div class="grid-container">
<div class="grid-row grid-gap"> <div class="grid-row grid-gap">
<div class="tablet:grid-col"> <div class="tablet:grid-col">
<main id="main-content" class="grid-container"> <main id="main-content-finish-profile" class="grid-container">
{% comment %} {% comment %}
Form success messages. Form success messages.
@ -44,7 +44,7 @@
<h1>Finish setting up your profile</h1> <h1>Finish setting up your profile</h1>
<p> <p>
We <a href="{% public_site_url 'domains/requirements/#what-.gov-domain-registrants-must-do' %}">require</a> We <a class="usa-link" href="{% public_site_url 'domains/requirements/#what-.gov-domain-registrants-must-do' %}" target="_blank">require</a>
that you maintain accurate contact information. that you maintain accurate contact information.
The details you provide will only be used to support the administration of .gov and wont be made public. The details you provide will only be used to support the administration of .gov and wont be made public.
</p> </p>
@ -82,9 +82,11 @@
</div> </div>
{# This field doesn't have the readonly button but it has common design elements from it #} {# This field doesn't have the readonly button but it has common design elements from it #}
{% with show_readonly=True add_class="display-none" group_classes="usa-form-readonly padding-top-2 bold-usa-label" sublabel_text=email_sublabel_text %} {% with show_readonly=True group_classes="usa-form-readonly padding-top-2 bold-usa-label" %}
{% with target_blank="true" sublabel_text=email_sublabel_text add_class="display-none" %}
{% input_with_errors form.email %} {% input_with_errors form.email %}
{% endwith %} {% endwith %}
{% endwith %}
{% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %} {% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %}
{% input_with_errors form.title %} {% input_with_errors form.title %}

View file

@ -400,7 +400,7 @@ class UserProfilePermission(PermissionsLoginMixin):
return False return False
# If we are given a pk in the request, do checks on it # If we are given a pk in the request, do checks on it
given_contact_pk = self.kwargs["pk"] given_contact_pk = self.kwargs.get("pk", None)
if given_contact_pk: if given_contact_pk:
# Grab the user in the DB to do a full object comparision, not just on ids # Grab the user in the DB to do a full object comparision, not just on ids