I was trying to change form on click of button.
It worked alright but with error:
An invalid form control with name='firstName' is not focusable.
For every input present in that form.
Is there any way to get from 1 form to other without getting any error.
let formChange = document.getElementsByClassName("formChange");
let createAccSignVar = "true";
let signINForm = document.getElementsByClassName("signINForm")[0];
let signUPForm = document.getElementsByClassName("signUPForm")[0];
function toggleSignINUPForms(e) {
signUPForm.style.display = createAccSignVar ? "none" : "block";
signINForm.style.display = createAccSignVar ? "block" : "none";
createAccSignVar = !createAccSignVar;
e.preventDefault()
}
formChange[0].addEventListener("click", toggleSignINUPForms)
formChange[1].addEventListener("click", toggleSignINUPForms).signINForm {
display: none;
}<form action="#" method="post" class="signINUPForm signUPForm">
<input type="text" name="firstName" id="firstName">
<label for="firstName">First Name</label>
<button class="formChange">Change to Form 2</button>
</form>
<form action="#" method="post" class="signINUPForm signINForm">
<input type="text" name="lastName" id="lastName" placeholder=" ">
<label for="lastName">Last Name</label>
<button class="formChange">Change to Form 1</button>
</form>The error was not shown in the VS code editor console but on browser console.
Here is the console Pic
Thanks for help in advance
