HTML Javascript form validation not displaying as expected-CodePudding

I have a simple form that I have made with HTML and CSS. I want to validate it so that if a user is attempting to sign up they will get an error message underneath the input value if they make a mistake. I have already made a validation function for email but when I tried to test it out it did not display the error message at all.The error messages are in a span with class error and are set to display: hidden I wish for them to be revealed when the conditions are met. Kindly help me out.

//variables declaration
const form = document.querySelector('form');
const emailField = form.querySelector('.emailField');
const emailInput = emailField.querySelector('email');
const usernameField = form.querySelector('.usernameField');
const usernameInput = usernameField.querySelector('username');
const schoolField = form.querySelector('.schoolField');
const schoolInput = schoolField.querySelector('school');
const passwordField = form.querySelector('.passwordField');
const passwordInput = passwordField.querySelector('password');


//Email validation
function checkEmail() {
const emaiPattern = /^[^ ] @[^ ] \.[a-z]{2,3}$/;
if (!emailInput.value.classList.add(emaiPattern)) {
  return emailInput.classList.add("invalid"); //Add invalid class if email value does not match 
}
emailField.classList.remove("invalid"); //remove invalid class if email value does not match 
}
//Calling function on form submit
form.addEventListener('submit', (e) => {
  e.preventDefault(); //Preventing form submit
  checkEmail();
});

/* Color Variables */
:root {
  --blue: rgb(40,56,144);
  --yellow: rgb(254,213,0);
  --white: rgb(255,255,255);
}

/* page styles */
body
 {
  box-sizing: border-box;
  background-color: rgb(40,56,144);
}

form button {
  background-color: var(--blue) !important;
}

#logBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

#signBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

.column .error {
  display: flex;
  justify-content: left;
  color: red;
  margin-top: 6px;
  display: none;
}

.column .error-icon {
  margin-right: 6px;
  font-size: 15px;
  margin-top: 5px;
}

.invalid .error {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- Form icons -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <main>
    <!-- Sign Up -->
    <section>
      <form method="/">
        <div >
            <div >
                <div >
                  <h1 >Please enter your credentials</h1>
                    <div >
                        <label for="email">School Email</label>
                        <div class = "inputField">
                        <input id="signup-email"  type="text" placeholder="Email address" required>
                        </div>
                        <span class = "error email-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter a valid email</p></span>
                    </div>
                    <div >
                        <label for="Name">Username</label>
                        <input id="signup-user"  type="username" placeholder="Username" required>
                        <span class = "error username-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter only alphabetical letters</p>
                        </span>
                    </div>
                    <div >
                        <label for="Name">School ID</label>
                        <input id="signup-id"  type="text" placeholder="School ID" required>
                        <span class = "error schoolID-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">School ID should only contain digits</p>
                        </span>
                    </div>
                    <div >
                        <label for="Name">Password</label>
                        <input id="signup-pwd"  type="password" placeholder="Password" required>
                        <span class = "error password-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter at least 8 characters with a number, symbol<br> and uppercase and lowercase character</p>
                        </span>
                        <a href="#navbar" >forget password?</a>
                    </div>
                    <div >
                        <button id="signup"  type="submit">Sign Up</button>
                    </div>
                    <div >
                        <p > Already have an account? <a href="login.html" >Login
                                </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
      </form>
    </section>
    </main>
    <!-- <script type="module" src="index.js"></script> -->
    <script src="main.js"></script>
</body>
</html>

CodePudding user response：

Updated just 3 lines (notice the //<-- comments).

You were failing to select the email input because you forgot a . at the beginning of the query selector.
Your condition for checking if the email matched the regex wasn't doing a regex match check at all.
You were adding the invalid class to emailInput instead of emailField.

//variables declaration
const form = document.querySelector('form');
const emailField = form.querySelector('.emailField');
const emailInput = emailField.querySelector('.email'); //<--
const usernameField = form.querySelector('.usernameField');
const usernameInput = usernameField.querySelector('username');
const schoolField = form.querySelector('.schoolField');
const schoolInput = schoolField.querySelector('school');
const passwordField = form.querySelector('.passwordField');
const passwordInput = passwordField.querySelector('password');


//Email validation
function checkEmail() {
  const emaiPattern = /^[^ ] @[^ ] \.[a-z]{2,3}$/;
  if (!emailInput.value.match(emaiPattern)) { //<--
    //Add invalid class if email value does not match 
    return emailField.classList.add("invalid"); //<--
  }
  //remove invalid class if email value does not match 
  emailField.classList.remove("invalid");
}
//Calling function on form submit
form.addEventListener('submit', (e) => {
  e.preventDefault(); //Preventing form submit
  checkEmail();
});

/* Color Variables */
:root {
  --blue: rgb(40,56,144);
  --yellow: rgb(254,213,0);
  --white: rgb(255,255,255);
}

/* page styles */
body
 {
  box-sizing: border-box;
  background-color: rgb(40,56,144);
}

form button {
  background-color: var(--blue) !important;
}

#logBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

#signBtn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
}

.column .error {
  display: flex;
  justify-content: left;
  color: red;
  margin-top: 6px;
  display: none;
}

.column .error-icon {
  margin-right: 6px;
  font-size: 15px;
  margin-top: 5px;
}

.invalid .error {
  display: flex;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
  <link rel="icon" href="./favicon.ico" type="image/x-icon">
  <!-- Form icons -->
  <link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
</head>

<body>
  <main>
    <!-- Sign Up -->
    <section>
      <form method="/">
        <div >
            <div >
                <div >
                  <h1 >Please enter your credentials</h1>
                    <div >
                        <label for="email">School Email</label>
                        <div class = "inputField">
                        <input id="signup-email"  type="text" placeholder="Email address" required>
                        </div>
                        <span class = "error email-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter a valid email</p></span>
                    </div>
                    <div >
                        <label for="Name">Username</label>
                        <input id="signup-user"  type="username" placeholder="Username" required>
                        <span class = "error username-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter only alphabetical letters</p>
                        </span>
                    </div>
                    <div >
                        <label for="Name">School ID</label>
                        <input id="signup-id"  type="text" placeholder="School ID" required>
                        <span class = "error schoolID-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">School ID should only contain digits</p>
                        </span>
                    </div>
                    <div >
                        <label for="Name">Password</label>
                        <input id="signup-pwd"  type="password" placeholder="Password" required>
                        <span class = "error password-error">
                          <i class='bx bx-error-circle error-icon'></i>
                          <p class = "error-text">Please enter at least 8 characters with a number, symbol<br> and uppercase and lowercase character</p>
                        </span>
                        <a href="#navbar" >forget password?</a>
                    </div>
                    <div >
                        <button id="signup"  type="submit">Sign Up</button>
                    </div>
                    <div >
                        <p > Already have an account? <a href="login.html" >Login
                                </a>
                        </p>
                    </div>
                </div>
            </div>
        </div>
      </form>
    </section>
    </main>
    <!-- <script type="module" src="index.js"></script> -->
    <script src="main.js"></script>
</body>
</html>

CodePudding user response：

There is an error in your code. Update these lines in your code:

if (!emailInput.value.match(emaiPattern)) {
  return emailInput.classList.add("invalid"); //Add invalid class if email value does not match 
}