fix: Develop JavaScript for Form Validation#48
Conversation
There was a problem hiding this comment.
Pull request overview
Adds a new client-side JavaScript form validation script intended to validate common registration/account fields before submission.
Changes:
- Introduces
jscripts/formValidation.jsto validatename/last/email/user/passwordon form submit. - Adds inline error rendering via
.errormsgelements.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,62 @@ | |||
| document.addEventListener('DOMContentLoaded', function() { | |||
| document.getElementById('settings').addEventListener('submit', function(event) { | |||
There was a problem hiding this comment.
document.getElementById('settings') can return null on pages that don’t have this form; calling addEventListener on null will throw and break all subsequent scripts. Add a null-check (and early return) before registering the submit handler.
| document.getElementById('settings').addEventListener('submit', function(event) { | |
| let settingsForm = document.getElementById('settings'); | |
| if (!settingsForm) { | |
| return; | |
| } | |
| settingsForm.addEventListener('submit', function(event) { |
| document.getElementById('settings').addEventListener('submit', function(event) { | ||
| let isValid = true; | ||
| let errorMessages = { |
There was a problem hiding this comment.
This handler assumes the #settings form has inputs named name, last, email, user, and password (e.g., event.target.name.value). In this repo, id="settings" is reused on many unrelated forms, so submitting those forms would throw. Scope the listener to the intended form(s) (unique id/class/data-attr) or check form.elements[...] exist before accessing .value.
| } | ||
|
|
||
| function showError(field, message) { | ||
| let errorSpan = document.querySelector(`.errormsg[id='errormsg_${field}']`); |
There was a problem hiding this comment.
showError() looks for elements with ids like errormsg_name/errormsg_email, but the existing forms currently render <span class="errormsg" id="errormsg_0">... (same id for all fields), so users will get blocked submission with no visible error. Update the selector/markup so the JS can reliably find the correct error element for each field (or fall back to the nearest .errormsg next to the input).
| let errorSpan = document.querySelector(`.errormsg[id='errormsg_${field}']`); | |
| let errorSpan = document.querySelector(`.errormsg[id='errormsg_${field}']`); | |
| if (!errorSpan) { | |
| let fieldInput = event.target.elements[field]; | |
| if (fieldInput) { | |
| if (fieldInput.nextElementSibling && fieldInput.nextElementSibling.classList.contains('errormsg')) { | |
| errorSpan = fieldInput.nextElementSibling; | |
| } else if (fieldInput.parentElement) { | |
| errorSpan = fieldInput.parentElement.querySelector('.errormsg'); | |
| if (!errorSpan && fieldInput.closest) { | |
| let fieldContainer = fieldInput.closest('label, div, p, td, li, .form-group, .field'); | |
| if (fieldContainer) { | |
| errorSpan = fieldContainer.querySelector('.errormsg'); | |
| } | |
| } | |
| } | |
| } | |
| } |
| @@ -0,0 +1,62 @@ | |||
| document.addEventListener('DOMContentLoaded', function() { | |||
There was a problem hiding this comment.
This file isn’t referenced by includes/header.php or any page template in the repo (no <script src="jscripts/formValidation.js"> occurrences), so the validation will never run as-is. Ensure it’s included on the relevant pages (and only those pages, given the #settings id reuse).
| let isValid = true; | ||
| let errorMessages = { | ||
| 'name': 'Name is required.', | ||
| 'last': 'Last name is required.', | ||
| 'email': 'Invalid email format.', | ||
| 'user': 'Username is required.', | ||
| 'password': 'Password is required.' | ||
| }; | ||
|
|
||
| // Clear previous error messages | ||
| document.querySelectorAll('.errormsg').forEach(e => e.innerText = ''); | ||
|
|
There was a problem hiding this comment.
This introduces ES6+ features (let, arrow functions, template literals, NodeList.forEach) while the rest of the repo JS (e.g., jscripts/cpanel.js) is written in older ES3/ES5 style. If legacy browsers are in scope for this project, this may break at runtime; consider rewriting in ES5-compatible syntax or ensuring a build/transpile step exists.
Automated fix by CoderOps.
Swarm: SwarmX3
Task: Develop JavaScript for Form Validation