{"id":3652,"date":"2022-10-07T23:55:35","date_gmt":"2022-10-07T18:55:35","guid":{"rendered":"https:\/\/www.edopedia.com\/blog\/?p=3652"},"modified":"2022-10-07T23:57:10","modified_gmt":"2022-10-07T18:57:10","slug":"how-to-do-login-form-validation-in-html5-css3-javascript","status":"publish","type":"post","link":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/","title":{"rendered":"How to do Login Form Validation in HTML5, CSS3 & JavaScript"},"content":{"rendered":"\n

In this tutorial, I will teach you\u00a0how to do Login Form Validation<\/strong>\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake effect) while displaying the errors to improve the design. The complete source code of this Login Form Validation project is given below.<\/p>\n\n\n\n

Source Code of Login Form Validation with Shake Effect<\/h2>\n\n\n\n

index.html<\/h3>\n\n\n\n
<!DOCTYPE html>\n<html lang="en">\n<head>\n  <meta charset="UTF-8">\n  <meta name="viewport" content="width=device-width, initial-scale=1.0">\n  <title>Login Form with Shake Effect<\/title>\n  <link rel="stylesheet" href="style.css">\n  <link rel="stylesheet" href="https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/5.15.3\/css\/all.min.css"\/>\n<\/head>\n<body>\n  <div class="wrapper">\n    <header>Login Form<\/header>\n    <form action="#">\n      <div class="field email">\n        <div class="input-area">\n          <input type="text" placeholder="Email Address">\n          <i class="icon fas fa-envelope"><\/i>\n          <i class="error error-icon fas fa-exclamation-circle"><\/i>\n        <\/div>\n        <div class="error error-txt">Email can't be blank<\/div>\n      <\/div>\n      <div class="field password">\n        <div class="input-area">\n          <input type="password" placeholder="Password">\n          <i class="icon fas fa-lock"><\/i>\n          <i class="error error-icon fas fa-exclamation-circle"><\/i>\n        <\/div>\n        <div class="error error-txt">Password can't be blank<\/div>\n      <\/div>\n      <div class="pass-txt"><a href="#">Forgot password?<\/a><\/div>\n      <input type="submit" value="Login">\n    <\/form>\n    <div class="sign-txt">Not yet member? <a href="#">Signup now<\/a><\/div>\n  <\/div>\n\n  <script src="script.js"><\/script>\n\n<\/body>\n<\/html>\n<\/pre><\/div>\n\n\n\n
script.js<\/h3>\n\n\n\n
const form = document.querySelector("form");\neField = form.querySelector(".email"),\neInput = eField.querySelector("input"),\npField = form.querySelector(".password"),\npInput = pField.querySelector("input");\n\nform.onsubmit = (e)=>{\n  e.preventDefault(); \/\/preventing from form submitting\n  \/\/if email and password is blank then add shake class in it else call specified function\n  (eInput.value == "") ? eField.classList.add("shake", "error") : checkEmail();\n  (pInput.value == "") ? pField.classList.add("shake", "error") : checkPass();\n\n  setTimeout(()=>{ \/\/remove shake class after 500ms\n    eField.classList.remove("shake");\n    pField.classList.remove("shake");\n  }, 500);\n\n  eInput.onkeyup = ()=>{checkEmail();} \/\/calling checkEmail function on email input keyup\n  pInput.onkeyup = ()=>{checkPass();} \/\/calling checkPassword function on pass input keyup\n\n  function checkEmail(){ \/\/checkEmail function\n    let pattern = \/^[^ ]+@[^ ]+\\.[a-z]{2,3}$\/; \/\/pattern for validate email\n    if(!eInput.value.match(pattern)){ \/\/if pattern not matched then add error and remove valid class\n      eField.classList.add("error");\n      eField.classList.remove("valid");\n      let errorTxt = eField.querySelector(".error-txt");\n      \/\/if email value is not empty then show please enter valid email else show Email can't be blank\n      (eInput.value != "") ? errorTxt.innerText = "Enter a valid email address" : errorTxt.innerText = "Email can't be blank";\n    }else{ \/\/if pattern matched then remove error and add valid class\n      eField.classList.remove("error");\n      eField.classList.add("valid");\n    }\n  }\n\n  function checkPass(){ \/\/checkPass function\n    if(pInput.value == ""){ \/\/if pass is empty then add error and remove valid class\n      pField.classList.add("error");\n      pField.classList.remove("valid");\n    }else{ \/\/if pass is empty then remove error and add valid class\n      pField.classList.remove("error");\n      pField.classList.add("valid");\n    }\n  }\n\n  \/\/if eField and pField doesn't contains error class that mean user filled details properly\n  if(!eField.classList.contains("error") && !pField.classList.contains("error")){\n    window.location.href = form.getAttribute("action"); \/\/redirecting user to the specified url which is inside action attribute of form tag\n  }\n}\n<\/pre><\/div>\n\n\n\n
style.css<\/h3>\n\n\n\n
@import url('https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@400;500;600&display=swap');\n*{\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n  font-family: "Poppins", sans-serif;\n}\nbody{\n  width: 100%;\n  height: 100vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #5372F0;\n}\n::selection{\n  color: #fff;\n  background: #5372F0;\n}\n.wrapper{\n  width: 380px;\n  padding: 40px 30px 50px 30px;\n  background: #fff;\n  border-radius: 5px;\n  text-align: center;\n  box-shadow: 10px 10px 15px rgba(0,0,0,0.1);\n}\n.wrapper header{\n  font-size: 35px;\n  font-weight: 600;\n}\n.wrapper form{\n  margin: 40px 0;\n}\nform .field{\n  width: 100%;\n  margin-bottom: 20px;\n}\nform .field.shake{\n  animation: shake 0.3s ease-in-out;\n}\n@keyframes shake {\n  0%, 100%{\n    margin-left: 0px;\n  }\n  20%, 80%{\n    margin-left: -12px;\n  }\n  40%, 60%{\n    margin-left: 12px;\n  }\n}\nform .field .input-area{\n  height: 50px;\n  width: 100%;\n  position: relative;\n}\nform input{\n  width: 100%;\n  height: 100%;\n  outline: none;\n  padding: 0 45px;\n  font-size: 18px;\n  background: none;\n  caret-color: #5372F0;\n  border-radius: 5px;\n  border: 1px solid #bfbfbf;\n  border-bottom-width: 2px;\n  transition: all 0.2s ease;\n}\nform .field input:focus,\nform .field.valid input{\n  border-color: #5372F0;\n}\nform .field.shake input,\nform .field.error input{\n  border-color: #dc3545;\n}\n.field .input-area i{\n  position: absolute;\n  top: 50%;\n  font-size: 18px;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n.input-area .icon{\n  left: 15px;\n  color: #bfbfbf;\n  transition: color 0.2s ease;\n}\n.input-area .error-icon{\n  right: 15px;\n  color: #dc3545;\n}\nform input:focus ~ .icon,\nform .field.valid .icon{\n  color: #5372F0;\n}\nform .field.shake input:focus ~ .icon,\nform .field.error input:focus ~ .icon{\n  color: #bfbfbf;\n}\nform input::placeholder{\n  color: #bfbfbf;\n  font-size: 17px;\n}\nform .field .error-txt{\n  color: #dc3545;\n  text-align: left;\n  margin-top: 5px;\n}\nform .field .error{\n  display: none;\n}\nform .field.shake .error,\nform .field.error .error{\n  display: block;\n}\nform .pass-txt{\n  text-align: left;\n  margin-top: -10px;\n}\n.wrapper a{\n  color: #5372F0;\n  text-decoration: none;\n}\n.wrapper a:hover{\n  text-decoration: underline;\n}\nform input[type="submit"]{\n  height: 50px;\n  margin-top: 30px;\n  color: #fff;\n  padding: 0;\n  border: none;\n  background: #5372F0;\n  cursor: pointer;\n  border-bottom: 2px solid rgba(0,0,0,0.1);\n  transition: all 0.3s ease;\n}\nform input[type="submit"]:hover{\n  background: #2c52ed;\n}\n<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake effect) while displaying the errors to improve the design. The complete source code of this Login Form Validation project is given below. Source Code of Login Form Validation with Shake … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":3654,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[112],"tags":[],"class_list":["post-3652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials"],"yoast_head":"\nHow to do Login Form Validation in HTML5, CSS3 & JavaScript<\/title>\n<meta name=\"description\" content=\"In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to do Login Form Validation in HTML5, CSS3 & JavaScript\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Edopedia\" \/>\n<meta property=\"article:author\" content=\"trulyfurqan\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T18:55:35+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-10-07T18:57:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"880\" \/>\n\t<meta property=\"og:image:height\" content=\"495\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Furqan\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Furqan\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to do Login Form Validation in HTML5, CSS3 & JavaScript","description":"In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/","og_locale":"en_US","og_type":"article","og_title":"How to do Login Form Validation in HTML5, CSS3 & JavaScript","og_description":"In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake","og_url":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/","og_site_name":"Edopedia","article_author":"trulyfurqan","article_published_time":"2022-10-07T18:55:35+00:00","article_modified_time":"2022-10-07T18:57:10+00:00","og_image":[{"width":880,"height":495,"url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg","type":"image\/jpeg"}],"author":"Furqan","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Furqan","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#article","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/"},"author":{"name":"Furqan","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339"},"headline":"How to do Login Form Validation in HTML5, CSS3 & JavaScript","datePublished":"2022-10-07T18:55:35+00:00","dateModified":"2022-10-07T18:57:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/"},"wordCount":74,"commentCount":0,"publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg","articleSection":["Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/","url":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/","name":"How to do Login Form Validation in HTML5, CSS3 & JavaScript","isPartOf":{"@id":"https:\/\/www.edopedia.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg","datePublished":"2022-10-07T18:55:35+00:00","dateModified":"2022-10-07T18:57:10+00:00","description":"In this tutorial, I will teach you\u00a0how to do Login Form Validation\u00a0using HTML5, CSS3, and JavaScript. We will also use some animations (like the shake","breadcrumb":{"@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#primaryimage","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2022\/10\/Login-Form-Validation-with-Shake-Effect.jpg","width":880,"height":495,"caption":"How to do Login Form Validation in HTML5, CSS3 & JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/www.edopedia.com\/blog\/how-to-do-login-form-validation-in-html5-css3-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.edopedia.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to do Login Form Validation in HTML5, CSS3 & JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.edopedia.com\/blog\/#website","url":"https:\/\/www.edopedia.com\/blog\/","name":"Edopedia","description":"Coding\/Programming Blog","publisher":{"@id":"https:\/\/www.edopedia.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.edopedia.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.edopedia.com\/blog\/#organization","name":"Edopedia","url":"https:\/\/www.edopedia.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","contentUrl":"https:\/\/www.edopedia.com\/blog\/wp-content\/uploads\/2017\/10\/edopedia_icon_text_10.jpg","width":400,"height":100,"caption":"Edopedia"},"image":{"@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/3951cb19e3aa56df09e408c98aa02339","name":"Furqan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.edopedia.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e5e68aef3ad8f0b83d56f4953c512c8e57bd2e6dc64daec33b5d0495d9058f51?s=96&d=mm&r=g","caption":"Furqan"},"description":"Well. I've been working for the past three years as a web designer and developer. I have successfully created websites for small to medium sized companies as part of my freelance career. During that time I've also completed my bachelor's in Information Technology.","sameAs":["http:\/\/www.edopedia.com\/blog\/","trulyfurqan"],"url":"https:\/\/www.edopedia.com\/blog\/author\/furqan\/"}]}},"_links":{"self":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/comments?post=3652"}],"version-history":[{"count":2,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3652\/revisions"}],"predecessor-version":[{"id":3656,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/posts\/3652\/revisions\/3656"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media\/3654"}],"wp:attachment":[{"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/media?parent=3652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/categories?post=3652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.edopedia.com\/blog\/wp-json\/wp\/v2\/tags?post=3652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}