Why client-side built-in form validation doesn't work if the browser receives the html through http?

Issue

I have a server project. Here is a html file. If I open the file from disk directly, built-in client-side form validation works. But if I transmit the file through http, client-side form validation doesn't work. Here is the html file:

async function submitLoginForm() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  try {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        username,
        password
      }),
    });

    if (response.status === 200) {
      window.location.href = '/dashboard';
    } else if (response.status === 401) {
      const errorMessage = document.getElementById('error-message');
      errorMessage.textContent = 'Error: Invalid username or password';
    } else {
      const errorMessage = document.getElementById('error-message');
      errorMessage.textContent = 'An error occurred';
    }

  } catch (error) {
    console.error('Error during login:', error);
  }
}

<h2>Login</h2>
<form id="loginForm">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required maxlength="10" pattern="^\S+$">
  <br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" required maxlength="10" pattern="^\S+$">
  <br>
  <button type="submit" onclick="submitLoginForm()">Login</button>
  <button type="button" onclick="location.href='register.html'">Register</button>
  <br>
  <div id="error-message"></div>
</form>

Here is the header of http response:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 2393
Cache-Control: no-cache, no-store, must-revalidate
Date: Mon, 18 Dec 2023 00:48:59 GMT

I have check develop tool in browser, here is the errors and warnings in console:

Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'attribution-reporting'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'run-ad-auction'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'join-ad-interest-group'.
Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'browsing-topics'.
An element doesn't have an autocomplete attribute
A form field has an id or name attribute that the browser's autofill recognizes. However, it doesn't have an autocomplete attribute assigned. This might prevent the browser from correctly autofilling the form.
To fix this issue, provide an autocomplete attribute.
1 resource
Violating node
Learn more: HTML attribute: autocomplete

Solution

I think, that the built-in client-side form validation works when you open the HTML file directly from disk suggests that there might be an issue with the HTTP response headers or the way the HTML file is served.

Here are a few things to check:

• Content-Type Header Recheck this set correctly to text/html; charset=utf-8.

• Then, serve HTML as UTF-8: HTML file is saved with the UTF-8 encoding.

• Then, check for additional headers:

• Browser cache: You might as well clear your browser cache.

• HTTPS consideration: Some modern browsers enforce stricter security policies so you'd better serving your app over HTTPS.

• Autocomplete attribute If you check all these, finally, it's good practice to add autocomplete="off" to your form fields to prevent browser autofill issues.

<input type="text" id="username" name="username" required maxlength="10" pattern="^\S+$" autocomplete="off">
<input type="password" id="password" name="password" required maxlength="10" pattern="^\S+$" autocomplete="off">

Answered By - BlueSpider