I can't check the form validation-CodePudding

I have a signup form that I have created and I want to check if the username input has text in it and print an error message but my js code doesn't work I tried to check if the username input have text in it and then give the error message value and some CSS to show it

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"  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>

CodePudding user response：

I added a div for the 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"  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>