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(){
let fullNameButtonClicked = false
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[id$="__edit-button"]').forEach(function(button) {
let fieldIdParts = button.id.split("__")
if (fieldIdParts && fieldIdParts.length > 0){
let fieldName = fieldIdParts[0]
let form = document.querySelector('.main-content-finish-profile');
// Get all input elements within the form
let inputs = form ? form.querySelectorAll('input') : null;
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`);
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
button.click()
editButton.click();
}
// If either the full_name field errors out,
// 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){
// 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) {
fullNameButton.click()
fullNameButtonClicked = true
}
}
fullNameButton.click();
fullNameButtonClicked = true;
}
}
});
});
}
};
// Hookup all edit buttons to the `handleEditButtonClick` function
setupListener();

View file

@ -11,7 +11,7 @@
<div class="grid-container">
<div class="grid-row grid-gap">
<div class="tablet:grid-col">
<main id="main-content" class="grid-container">
<main id="main-content-finish-profile" class="grid-container">
{% comment %}
Form success messages.
@ -44,7 +44,7 @@
<h1>Finish setting up your profile</h1>
<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.
The details you provide will only be used to support the administration of .gov and wont be made public.
</p>
@ -82,9 +82,11 @@
</div>
{# 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 %}
{% endwith %}
{% endwith %}
{% with show_edit_button=True show_readonly=True group_classes="usa-form-readonly padding-top-2" %}
{% input_with_errors form.title %}

View file

@ -400,7 +400,7 @@ class UserProfilePermission(PermissionsLoginMixin):
return False
# 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:
# Grab the user in the DB to do a full object comparision, not just on ids