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:
@@ -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';
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user