Skip to content

fix: Develop JavaScript for Form Validation #48

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sergioceron wants to merge 1 commit into
base: master
Choose a base branch
from
Open

fix: Develop JavaScript for Form Validation #48

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 62 additions & 0 deletions jscripts/formValidation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
document.addEventListener('DOMContentLoaded', function() {
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copilot uses AI. Check for mistakes.
document.getElementById('settings').addEventListener('submit', function(event) {
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
document.getElementById('settings').addEventListener('submit', function(event) {
let settingsForm = document.getElementById('settings');
if (!settingsForm) {
return;
}
settingsForm.addEventListener('submit', function(event) {

Copilot uses AI. Check for mistakes.
let isValid = true;
let errorMessages = {
Comment on lines +2 to +4
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
'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 = '');

Comment on lines +3 to +14
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
// Validate name
let name = event.target.name.value.trim();
if (name === '') {
showError('name', errorMessages['name']);
isValid = false;
}

// Validate last name
let lastName = event.target.last.value.trim();
if (lastName === '') {
showError('last', errorMessages['last']);
isValid = false;
}

// Validate email
let email = event.target.email.value.trim();
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
showError('email', errorMessages['email']);
isValid = false;
}

// Validate user
let user = event.target.user.value.trim();
if (user === '') {
showError('user', errorMessages['user']);
isValid = false;
}

// Validate password
let password = event.target.password.value;
if (password === '') {
showError('password', errorMessages['password']);
isValid = false;
}

if (!isValid) {
event.preventDefault();
}

function showError(field, message) {
let errorSpan = document.querySelector(`.errormsg[id='errormsg_${field}']`);
Copy link

Copilot AI Apr 11, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Suggested change
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');
}
}
}
}
}

Copilot uses AI. Check for mistakes.
if (errorSpan) {
errorSpan.innerText = message;
}
}
});
});