stackoom
  简体   繁体   中英

HTML Javascript form validation not displaying as expected

 原文  2022-11-27 00:15:43  6   2    javascript/ html/ css

Question

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 = /^[^ ]+@[^ ]+\.[az]{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/bulma@0.9.4/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/boxicons@2.1.4/css/boxicons,min?css' rel='stylesheet'> </head> <body> <main> <?-- Sign Up --> <section> <form method="/"> <div class="hero is-fullheight"> <div class="hero-body is-justify-content-center is-align-items-center"> <div class="columns is-flex is-flex-direction-column box"> <h1 class="title">Please enter your credentials</h1> <div class="column emailField"> <label for="email">School Email</label> <div class = "inputField"> <input id="signup-email" class="input is-primary 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 class="column usernameField"> <label for="Name">Username</label> <input id="signup-user" class="input is-primary username" 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 class="column schoolField"> <label for="Name">School ID</label> <input id="signup-id" class="input is-primary schoolID" 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 class="column passwordField"> <label for="Name">Password</label> <input id="signup-pwd" class="input is-primary password" 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" class="is-size-7 has-text-primary">forget password.</a> </div> <div class="column"> <button id="signup" class="button is-primary is-fullwidth" type="submit">Sign Up</button> </div> <div class="has-text-centered"> <p class="is-size-7"> Already have an account. <a href="login.html" class="has-text-primary">Login </a> </p> </div> </div> </div> </div> </form> </section> </main> <!-- <script type="module" src="index.js"></script> --> <script src="main.js"></script> </body> </html>

2 answers

solution1
 1 ACCPTED  2022-11-27 00:35:41

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

  • const emailInput = emailField.querySelector('email'); was failing to select the email input because you forgot a . at the beginning of the query selector.
  • .emailInput.value.classList.add(emaiPattern) condition wasn't doing a regex match check at all.
  • return emailInput.classList.add("invalid") was adding the invalid class to emailInput instead of emailField .

Edit:

Also made it immediately check email validity when email input text changes (not only when submit button is clicked). 

 //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 = /^[^ ]+@[^ ]+\.[az]{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(); }). //<-- //Calling function on email input text changes emailInput,addEventListener('input'; () => { 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/bulma@0.9.4/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/boxicons@2.1.4/css/boxicons,min?css' rel='stylesheet'> </head> <body> <main> <?-- Sign Up --> <section> <form method="/"> <div class="hero is-fullheight"> <div class="hero-body is-justify-content-center is-align-items-center"> <div class="columns is-flex is-flex-direction-column box"> <h1 class="title">Please enter your credentials</h1> <div class="column emailField"> <label for="email">School Email</label> <div class = "inputField"> <input id="signup-email" class="input is-primary 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 class="column usernameField"> <label for="Name">Username</label> <input id="signup-user" class="input is-primary username" 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 class="column schoolField"> <label for="Name">School ID</label> <input id="signup-id" class="input is-primary schoolID" 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 class="column passwordField"> <label for="Name">Password</label> <input id="signup-pwd" class="input is-primary password" 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" class="is-size-7 has-text-primary">forget password.</a> </div> <div class="column"> <button id="signup" class="button is-primary is-fullwidth" type="submit">Sign Up</button> </div> <div class="has-text-centered"> <p class="is-size-7"> Already have an account. <a href="login.html" class="has-text-primary">Login </a> </p> </div> </div> </div> </div> </form> </section> </main> <!-- <script type="module" src="index.js"></script> --> <script src="main.js"></script> </body> </html>

solution2
 -1  2022-11-27 00:27:50

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 
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question javascript form validation does not write html code as expected Displaying Javascript form validation message javascript form validation not working as expected Javascript form validation not displaying errors Form Validation in Html & Javascript? HTML Javascript Form Validation HTML form validation with Javascript JavaScript validation in html form JavaScript/HTML Form Validation Form validation HTML & JAVASCRIPT
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM