Add client-side whitespace trimming for AR field names and labels

- Add form submit listener to trim field name and label inputs
- Provides immediate feedback to users before server-side validation
- Creates defense-in-depth approach with JS, route, and model layer trimming
This commit is contained in:
2025-10-20 22:32:31 -04:00
parent 66b88fec03
commit 996ecacb40

View File

@@ -111,6 +111,20 @@
</div> </div>
<script> <script>
// Trim whitespace from field name and label on form submission
document.getElementById('fieldForm').addEventListener('submit', function(e) {
var fieldNameInput = document.getElementById('fieldName');
var labelInput = document.getElementById('label');
// Trim whitespace from inputs before submission
if (fieldNameInput && !fieldNameInput.disabled) {
fieldNameInput.value = fieldNameInput.value.trim();
}
if (labelInput) {
labelInput.value = labelInput.value.trim();
}
});
function editField(button) { function editField(button) {
// Get data from button attributes // Get data from button attributes
var fieldData = { var fieldData = {
@@ -121,7 +135,7 @@ function editField(button) {
editable: button.getAttribute('data-editable'), editable: button.getAttribute('data-editable'),
displayOrder: button.getAttribute('data-displayorder') displayOrder: button.getAttribute('data-displayorder')
}; };
// Populate form // Populate form
document.getElementById('formAction').value = 'update'; document.getElementById('formAction').value = 'update';
document.getElementById('fieldId').value = fieldData.id; document.getElementById('fieldId').value = fieldData.id;
@@ -130,20 +144,20 @@ function editField(button) {
document.getElementById('fieldType').value = fieldData.fieldType; document.getElementById('fieldType').value = fieldData.fieldType;
document.getElementById('editable').value = fieldData.editable; document.getElementById('editable').value = fieldData.editable;
document.getElementById('displayOrder').value = fieldData.displayOrder; document.getElementById('displayOrder').value = fieldData.displayOrder;
// Disable field name when editing and show warning // Disable field name when editing and show warning
document.getElementById('fieldName').disabled = true; document.getElementById('fieldName').disabled = true;
document.getElementById('fieldNameWarning').style.display = 'block'; document.getElementById('fieldNameWarning').style.display = 'block';
// Update form heading // Update form heading
var formCard = document.querySelector('.card:last-child .card-header h5'); var formCard = document.querySelector('.card:last-child .card-header h5');
if (formCard) { if (formCard) {
formCard.textContent = 'Edit AR Field'; formCard.textContent = 'Edit AR Field';
} }
// Change button text // Change button text
document.querySelector('button[type="submit"]').textContent = 'Update Field'; document.querySelector('button[type="submit"]').textContent = 'Update Field';
// Scroll to form // Scroll to form
document.getElementById('fieldForm').scrollIntoView({ behavior: 'smooth' }); document.getElementById('fieldForm').scrollIntoView({ behavior: 'smooth' });
} }
@@ -152,17 +166,17 @@ function resetForm() {
document.getElementById('formAction').value = 'add'; document.getElementById('formAction').value = 'add';
document.getElementById('fieldId').value = ''; document.getElementById('fieldId').value = '';
document.getElementById('fieldForm').reset(); document.getElementById('fieldForm').reset();
// Enable field name and hide warning // Enable field name and hide warning
document.getElementById('fieldName').disabled = false; document.getElementById('fieldName').disabled = false;
document.getElementById('fieldNameWarning').style.display = 'none'; document.getElementById('fieldNameWarning').style.display = 'none';
// Reset form heading // Reset form heading
var formCard = document.querySelector('.card:last-child .card-header h5'); var formCard = document.querySelector('.card:last-child .card-header h5');
if (formCard) { if (formCard) {
formCard.textContent = 'Add/Edit AR Field'; formCard.textContent = 'Add/Edit AR Field';
} }
// Reset button text // Reset button text
document.querySelector('button[type="submit"]').textContent = 'Save Field'; document.querySelector('button[type="submit"]').textContent = 'Save Field';
} }