0
const form = document.querySelector("#contact-form");
const feedback = document.querySelector(".feedback");
const patternName = /^[a-z A-Z]{3,25}$/;

form.addEventListener("submit", (e) => {
e.preventDefault();
const firstname = form.firstname.value;
if (patternName.test(firstname)) {
console.log(firstname);
feedback.textContent = "";
form.reset();
resetInputHistory();
} else {
console.log("invalid");
feedback.textContent =
  "Name field must not contain special characters or numbers and should not be less than three                letters.";
}


function resetInputHistory() {
const inputFields = form.querySelectorAll("input");
inputFields.forEach((input) => {
  input.autocomplete = false;
});
}
});

I have tried setting the input.autocomplete statement to both false and "off", yet field still shows all the previous input history.

Heong
  • 17
  • 5

3 Answers3

0

Solution without JavaScript

you can see i use autocomplete (on) on my form and i also use autocomplete (off) on my email input tag inside the form. if you type any name in name input tag and submit after the reload the autocomplete work on that but if you try this for the email tag then autocomplete not work... so you can doing this from the HTML without using JavaScript....

<!DOCTYPE html>
<html>
<body>

<h1>The autocomplete attribute</h1>

<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field!</p>

<form action="/action_page.php" autocomplete="on">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off"><br><br>
  <input type="submit">
</form>

</body>
</html>
Mohmmad Amir
  • 72
  • 6
  • Thank you Sir. Your suggestion work. And do share why it doesn't work on an email field. – Heong May 31 '23 at 14:54
  • Autocomplete is not working on email input field because I have turned off autocomplete on input so it is not working. `` see this code carefully.. – Mohmmad Amir May 31 '23 at 15:00
0

In your code, you're already setting input.autocomplete to false, but that may not have the desired effect in all browsers.

try setting it to "off"

function resetInputHistory() {
  const inputFields = 
  form.querySelectorAll("input");
  inputFields.forEach((input) => {
  input.autocomplete = "off";
});}
TENSHKUMAR K
  • 1
  • 3
0

Maybe try this

const form = document.querySelector("#contact-form");
const feedback = document.querySelector(".feedback");
const patternName = /^[a-zA-Z]{3,25}$/;

form.addEventListener("submit", (e) => {
  e.preventDefault();
  
  const firstname = form.firstname.value.trim(); // Trim any leading/trailing whitespace
  
  if (patternName.test(firstname)) {
    console.log(firstname);
    feedback.textContent = "Form submitted successfully!";
    form.reset(); // Reset the form to clear input fields
  } else {
    console.log("invalid");
    feedback.textContent =
      "Name field must contain only letters and should be between 3 and 25 characters.";
  }
});
xmile90
  • 3
  • 6