Tengo un formulario de registro que he creado y quiero verificar si la entrada del nombre de usuario tiene texto e imprimir un mensaje de error, pero mi código js no funciona. Intenté verificar si la entrada del nombre de usuario tiene texto y luego dar el valor del mensaje de error y algo de CSS para mostrarlo
let firstName = document.getElementById('fName').value; let lastName = document.getElementById('lName').value; let userName = document.getElementById('userName').value; let email = document.getElementById('email').value; let password = document.getElementById('password'); function CheckForm() { let check = true; if (!CheckMyName()) { check = false; } return check; } function CheckMyName() { let checkName = true; if (userName == "") { document.getElementById('messageName').value = "you must enter a name"; document.getElementById('messageName').style.display = "inline"; checkName = false; } else{ document.getElementById('messageName').style.display = "none"; } return checkName; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <body> <div id="container"> <form id="signup" method="post" name="signup" runat="server" onsubmit="return CheckForm()"> <h1>create an account</h1> <br /> first name <input type="text" id="fName" name="fName" /> <label id="messageName" class="errorMessage" name="msgName"></label> <br /> <br /> last name <input type="text" id="lName" name="lName" /> <br /> <br /> username <input type="text" id="userName" name="userName" /> <br /> <br /> email <input type="email" id="email" name="email" /> <br /> <br /> password <input type="password" id="password" name="password" /> <br /> <br /> phone <input type="tel" id="phone" name="phone" /> <br /> <br /> <input type="submit" id="submit" name="submit" value="create" /> <script src="main.js"></script> </body> </html>Agregué un div para el error.
const firstName = document.getElementById("fName").value; const lastName = document.getElementById("lName").value; const userNameField = document.getElementById("userName"); const email = document.getElementById("email").value; const password = document.getElementById("password"); const errorMsg = document.getElementById("errorMsg"); function CheckForm() { return CheckMyName(); } function CheckMyName() { let checkName = true; const userName = userNameField.value; if (userName == "") { errorMsg.innerText = "you must enter a name"; checkName = false; } else { errorMsg.innerText = ""; } return checkName; } <div id="container"> <form id="signup" method="post" name="signup" runat="server" onsubmit="return CheckForm()"> <h1>create an account</h1> <br /> first name <input type="text" id="fName" name="fName" /> <label id="messageName" class="errorMessage" name="msgName"></label> <br /> <br /> last name <input type="text" id="lName" name="lName" /> <br /> <br /> username <input type="text" id="userName" name="userName" /> <br /> <br /> email <input type="email" id="email" name="email" /> <br /> <br /> password <input type="password" id="password" name="password" /> <br /> <br /> phone <input type="tel" id="phone" name="phone" /> <br /> <br /> <input type="submit" id="submit" name="submit" value="create" /> </form> <div id="errorMsg"></div> </div>