Refactor form validation: extract inline JS, fix duplicate attributes, improve accessibility, auto-remove spaces

[Copilot]

The form had duplicate action attributes, inline onClick handlers, and lacked accessibility labels. Validation also didn't handle whitespace-only input properly.

Changes

Form markup (src/pages/partials/body.handlebars):

• Remove duplicate action="" attribute
• Remove inline onClick handler from submit button
• Add aria-label="Search GitHub user" to button
• Remove unused input-group-addon class
• Fix placeholder: "Github" → "GitHub"
• Remove inline <script> block with validation logic

Validation (public/js/form-validation.js):

• Extract validation to external file using onsubmit handler
• Auto-remove all spaces (leading, trailing, and internal) from username input
• Check if username is empty after removing spaces
• Update input field value with cleaned username before submission
• Enter key support works automatically via onsubmit

document.getElementById('search-form').onsubmit = function() {
    const inputField = document.getElementById('username');
    // Auto-remove all spaces from the username
    const username = inputField.value.replace(/\s/g, '');

    if (username === '') {
        alert('Username cannot be empty.');
        return false;
    }

    // Update the input field with the cleaned value
    inputField.value = username;

    showLoader();
    return true;
};

Behavior

Instead of showing error messages for spaces, the form now automatically cleans the input:

• Input: " test user " → Auto-cleaned to: "testuser" → Form submits ✅
• Input: " " (whitespace-only) → Error: "Username cannot be empty." ❌
• Input: "validusername" → Passes validation ✅

Screenshot

Original prompt

Issue Description

The current implementation of the form in src/pages/partials/body.handlebars has some issues that need improvements. The issues identified are:

1. Duplicate action attributes in the <form> tag.
2. The <button> element uses an inline onClick JavaScript event, which is against best practices for maintainable and accessible code.
3. The button contains a Font Awesome icon but lacks an accessible label for screen readers.
4. To enhance accessibility and user experience, the form should allow submission upon pressing the Enter key in the input field.

Proposed Solution

1. Remove Duplicate Action Attribute: Retain only one action attribute in the <form> tag. Use the value "#" or leave it empty to submit to the current page.

2. Use the onsubmit Event: Remove the inline onClick event from the <button> and instead handle form submission (including validations) using the onsubmit attribute on the <form> tag. Implement the validateInput() function in an external JavaScript file for better maintainability.

3. Fix Button Accessibility: Replace the CSS class input-group-addon with the correct btn class. Add an aria-label to the button for accessibility.

4. Support "Enter to Submit": By utilizing the onsubmit event handler of the <form> tag, submitting the form by pressing the "Enter" key will work out of the box as browsers automatically handle form submission on Enter.

5. Fix Placeholder Typo: Update text in placeholder from "Github username" to `"GitHub username".

Detailed Implementation:

Here's the updated form code snippet:

<form id="search-form" method="get" action="#" onsubmit="return validateInput();">
  <div class="input-group">
    <input type="text" class="form-control" autofocus id="username" name="username" 
           placeholder="GitHub username" required title="Username cannot be empty or contain only spaces" 
           maxlength="39">
    <button type="submit" class="btn" aria-label="Search">
      <i class="fa fa-search"></i>
    </button>
  </div>
</form>

Improved validateInput() in JS (example implementation):

// This example assumes you have a separate JS file for your scripts.
document.getElementById("search-form").onsubmit = function() {
  const inputField = document.getElementById("username");
  const username = inputField.value.trim();

  if (username === "") {
    alert("Username cannot be empty or contain only spaces.");
    return false; // Prevent form submission
  }

  console.log("Searching for user: ", username);
  return true; // Allow form submission
}

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[wildan3105]

@copilot could you give me the screen recording of the UI after this change please?

[Copilot]

@copilot could you give me the screen recording of the UI after this change please?

Here's a step-by-step demonstration of the form improvements:

🎬 Demo Flow

1. Initial State

• Form with "GitHub username" placeholder (typo fixed)
• Accessible search button with aria-label

2. Whitespace-Only Input

• Entering " " triggers: "Username cannot be empty or contain only spaces."

3. Username with Spaces

• Entering "test user" triggers: "Username cannot contain any spaces."
• Works with both Enter key and button click

4. Valid Username

• Entering "validusername" passes validation and submits

✅ All validation scenarios working correctly with improved accessibility and maintainability.

[wildan3105]

Instead of this, could you just auto-remove the space?

[wildan3105]

@copilot please address the above comment

[Copilot]

Done in commit 7613cb9. The form now automatically removes all spaces (leading, trailing, and internal) from the username instead of showing an error.

Updated behavior:

• " test user " → auto-cleaned to "testuser" ✅
• " " (whitespace-only) → shows "Username cannot be empty." ❌
• "validusername" → passes validation ✅

Before (with spaces):

The input field value is automatically updated to the cleaned username before form submission.

[Copilot]

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/users/testuser
  • Triggering command: /usr/local/bin/node node src/api/app.js (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)