How to code a JavaScript validation form

JavaScript
JavaScript

On a user registration form, there are certain JavaScript validation rules you want your users to follow when inputting values to register on your site. Some of those rules include:

  • Some input fields cannot be empty
  • Some values must be in a particular length range
  • Some input fields must match (for example, password fields)
SELECTED JUST FOR YOU
Ways to optimize your web application

There are many more rules but let’s leave it at these basic rules. In this tutorial, we are going to perform form validation on all the input fields concerning the rules we just listed.

Create three files and name them:

  • register.php
  • index.php
  • scripts.js
  • style.css

Post Contents

SELECTED JUST FOR YOU
Testing Flask applications using Unittest in python

Registration Code

Place this code in register.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Form validation with JavaScript</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrapper">
   <form method="POST" action="index.php" onsubmit="return Validate()" name="vform" >
    <div id="username_div">
      <label>Username</label> <br>
      <input type="text" name="username" class="textInput">
      <div id="name_error"></div>
    </div>
    <div id="email_div">
      <label>Email</label> <br>
      <input type="email" name="email" class="textInput">
      <div id="email_error"></div>
    </div>
    <div id="password_div">
      <label>Password</label> <br>
      <input type="password" name="password" class="textInput">
    </div>
    <div id="pass_confirm_div">
       <label>Password confirm</label> <br>
       <input type="password" name="password_confirm" class="textInput">
       <div id="password_error"></div>
    </div>
    <div>
    <input type="submit" name="register" value="Register" class="btn">
    </div>
   </form>
  </div>
</body>
</html>
<script type="scripts.js"></script>

Styling

Now let’s add styling. In style.css, paste this code:

#wrapper {
  width: 30%;
  margin: 50px auto;
  padding: 50px;
  background: #D7FBFF;
}
form {
  margin: 30px auto;
}
.textInput {
  border: none;
  height: 28px;
  margin: 2px;
  border: 1px solid #6B7363;
  font-size: 1.2em;
  padding: 5px;
  width: 95%;
}
.textInput:focus {
  outline: none;
}
.btn {
  width: 98.6%;
  border: none;
  margin-top: 5px;
  color: white;
  background-color: #3b5998;
  border-radius: 5px;
  padding: 12px;
}

JavaScript validation

Now, this is the file in which the real validation is done, the scripts.css:

// SELECTING ALL TEXT ELEMENTS
var username = document.forms['vform']['username'];
var email = document.forms['vform']['email'];
var password = document.forms['vform']['password'];
var password_confirm = document.forms['vform']['password_confirm'];
// SELECTING ALL ERROR DISPLAY ELEMENTS
var name_error = document.getElementById('name_error');
var email_error = document.getElementById('email_error');
var password_error = document.getElementById('password_error');
// SETTING ALL EVENT LISTENERS
username.addEventListener('blur', nameVerify, true);
email.addEventListener('blur', emailVerify, true);
password.addEventListener('blur', passwordVerify, true);
// validation function
function Validate() {
  // validate username
  if (username.value == "") {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Username is required";
    username.focus();
    return false;
  }
  // validate username
  if (username.value.length < 3) {
    username.style.border = "1px solid red";
    document.getElementById('username_div').style.color = "red";
    name_error.textContent = "Username must be at least 3 characters";
    username.focus();
    return false;
  }
  // validate email
  if (email.value == "") {
    email.style.border = "1px solid red";
    document.getElementById('email_div').style.color = "red";
    email_error.textContent = "Email is required";
    email.focus();
    return false;
  }
  // validate password
  if (password.value == "") {
    password.style.border = "1px solid red";
    document.getElementById('password_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.textContent = "Password is required";
    password.focus();
    return false;
  }
  // check if the two passwords match
  if (password.value != password_confirm.value) {
    password.style.border = "1px solid red";
    document.getElementById('pass_confirm_div').style.color = "red";
    password_confirm.style.border = "1px solid red";
    password_error.innerHTML = "The two passwords do not match";
    return false;
  }
}
// event handler functions
function nameVerify() {
  if (username.value != "") {
   username.style.border = "1px solid #5e6e66";
   document.getElementById('username_div').style.color = "#5e6e66";
   name_error.innerHTML = "";
   return true;
  }
}
function emailVerify() {
  if (email.value != "") {
    email.style.border = "1px solid #5e6e66";
    document.getElementById('email_div').style.color = "#5e6e66";
    email_error.innerHTML = "";
    return true;
  }
}
function passwordVerify() {
  if (password.value != "") {
    password.style.border = "1px solid #5e6e66";
    document.getElementById('pass_confirm_div').style.color = "#5e6e66";
    document.getElementById('password_div').style.color = "#5e6e66";
    password_error.innerHTML = "";
    return true;
  }
  if (password.value === password_confirm.value) {
    password.style.border = "1px solid #5e6e66";
    document.getElementById('pass_confirm_div').style.color = "#5e6e66";
    password_error.innerHTML = "";
    return true;
  }
}

And that’s all about the code. Now to run this, copy the code into a folder inside htdocs or www folder of your PHP installation and log unto you browser and run it. Once the page is displayed, try to enter some values and play around with the validation.

SELECTED JUST FOR YOU
How to explain the importance of SEO?

I hope you find this helpful. Remember you can always support us by sharing.

Also read: https://www.blogthetech.com/what-is-git-can-it-really-recover-deleted-files/

LEAVE A REPLY

Please enter your comment!
Please enter your name here