Estoy tratando de usar este código de validación de datos usando JavaScript del sitio web freeCodeCamp para implementarlo en mi código, pero cuando pruebo el código en vscode usando un navegador en vivo, no funciona, pero funciona bien en jsfiddle. No estoy seguro de por qué no funciona bien en un navegador.

Artículo de freeCodeCamp que obtuve de: https://www.freecodecamp.org/news/form-validation-with-html5-and-javascript/

código freeCodeCamp jsfiddle https://jsfiddle.net/0tq3e49w/4/

Código HTML:

 <form id="form"> <label for="firstname"> First Name* </label> <input type="text" name="firstname" id="firstname" /> <button id="submit">Submit</button> <span role="alert" id="nameError" aria-hidden="true"> Please enter First Name </span> </form>

Código JS:

 const submit = document.getElementById("submit"); submit.addEventListener("click", validate); function validate(e) { e.preventDefault(); const firstNameField = document.getElementById("firstname"); let valid = true; if (!firstNameField.value) { const nameError = document.getElementById("nameError"); nameError.classList.add("visible"); firstNameField.classList.add("invalid"); nameError.setAttribute("aria-hidden", false); nameError.setAttribute("aria-invalid", true); } return valid; }

Código CSS:

 #nameError { display: none; font-size: 0.8em; } #nameError.visible { display: block; } input.invalid { border-color: red; }