Form validator javascript | form validator using html css javascript

Form validator javascript | form validator using html css javascript





Form validator javascript | form validator using html css javascript




Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create a Form validator. We use HTML & CSS and javascript for this  Form validator. Hope you enjoy our blog so let's start with a basic HTML structure for a Form validator javascript.

HTML code for Form validator

  <body>  
   <div class="container">  
    <h1>Register With Us</h1>  
    <form action="" id="form" class="form">  
     <div class="input">  
      <label for="username">Username</label>  
      <input  
       type="text"  
       name="username"  
       id="username"  
       placeholder="Username"  
       autocomplete="off"  
      />  
      <small>Error message</small>  
     </div>  
     <div class="input">  
      <label for="email">Email</label>  
      <input  
       type="text"  
       name="email"  
       id="email"  
       placeholder="Email"  
       autocomplete="off"  
      />  
      <small>Error message</small>  
     </div>  
     <div class="input">  
      <label for="password">Password</label>  
      <input  
       type="password"  
       name="password"  
       id="password"  
       placeholder="Password"  
      />  
      <small>Error message</small>  
     </div>  
     <div class="input">  
      <label for="c-password">Confirmer Password</label>  
      <input  
       type="password"  
       name="c-password"  
       id="c-password"  
       placeholder="Confirmer Password"  
      />  
      <small>Error message</small>  
     </div>  
     <button>Submit</button>  
    </form>  
   </div>  
    </body>  
There is all HTML code for the Form validator. Now, you can see output without CSS, then we write CSS for our Form validator.
output
Form validator javascript | form validator using html css javascript

CSS Code for Form validator

 @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap");  
 * {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  outline: none;  
 }  
 body {  
  background-color: #f9fafb;  
  font-family: "Open Sans", sans-serif;  
  height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .container {  
  background-color: #fff;  
  border-radius: 5px;  
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);  
  width: 400px;  
  padding: 30px 40px;  
 }  
 .container h1 {  
  text-align: center;  
  margin: 0 0 20px;  
  font-size: 24px;  
 }  
 .input {  
  margin-bottom: 20px;  
  position: relative;  
 }  
 .input label {  
  display: block;  
  margin-bottom: 10px;  
 }  
 .input input {  
  width: 100%;  
  height: 40px;  
  padding: 0 15px;  
  background-color: transparent;  
  border: 2px solid #f0f0f0;  
  border-radius: 5px;  
 }  
 .input small {  
  display: block;  
  color: #e74c3c;  
  font-weight: bold;  
  font-size: 11px;  
  padding-top: 3px;  
  visibility: hidden;  
 }  
 .input.success input {  
  border: 2px solid #2ecc71;  
 }  
 .input.error input {  
  border: 2px solid #e74c3c;  
 }  
 .input.error small {  
  visibility: visible;  
 }  
 button {  
  width: 100%;  
  height: 40px;  
  line-height: 40px;  
  background-color: #3498db;  
  border: 1px solid #3498db;  
  border-radius: 5px;  
  cursor: pointer;  
  color: #fff;  
  display: block;  
  font-size: 16px;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Form validator javascript | form validator using html css javascript

Now add javascript for the form validation!

Javascript code for form validation 

 const form = document.getElementById("form");  
 const username = document.getElementById("username");  
 const email = document.getElementById("email");  
 const password = document.getElementById("password");  
 const cPassword = document.getElementById("c-password");  
 //Show Error Message  
 function showError(input, message) {  
  const formControl = input.parentElement;  
  formControl.className = "input error";  
  const small = formControl.querySelector("small");  
  small.innerText = message;  
 }  
 //Show Success message  
 function showSuccess(input) {  
  const formControl = input.parentElement;  
  formControl.classList.add("success");  
 }  
 //Check Required fields  
 function checkRequired(inputArr) {  
  inputArr.forEach(function (input) {  
   if (input.value.trim() === "") {  
    showError(input, `${getFieldName(input)} is required`);  
   } else {  
    showSuccess(input);  
   }  
  });  
 }  
 // Get Field Name  
 function getFieldName(input) {  
  return input.id.charAt(0).toUpperCase() + input.id.slice(1);  
 }  
 // Check Input Lenght  
 function checkLenghth(input, min, max) {  
  if (input.value.length < min) {  
   showError(  
    input,  
    `${getFieldName(input)} must be at least ${min} characters `  
   );  
  } else if (input.value.length > max) {  
   showError(  
    input,  
    `${getFieldName(input)} must be less than ${max} characters `  
   );  
  } else {  
   showSuccess(input);  
  }  
 }  
 // Check E-mail Is Valid  
 function checkEmail(input) {  
  const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;  
  if (re.test(input.value.trim())) {  
   showSuccess(input);  
  } else {  
   showError(input, "E-mail is not Valid");  
  }  
 }  
 // Check Password Match  
 function checkPasswordMatch(input1, input2) {  
  if (input1.value !== input2.value) {  
   showError(input2, "Passwords do not match");  
  }  
 }  
 form.addEventListener("submit", (e) => {  
  e.preventDefault();  
  checkRequired([username, email, password, cPassword]);  
  checkLenghth(username, 3, 15);  
  checkLenghth(password, 8, 25);  
  checkEmail(email);  
  checkPasswordMatch(password, cPassword);  
 });  
Final output

Form validator javascript | form validator using html css javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like Form validator javascript. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a form validator using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

Post a Comment

Previous Post Next Post