Spread the love

In this tutorial we will learn javascript validation without using any third party library. we will validate the simple form with 5 inputs fields.

Let’s start with simple steps

Step 1: Create a html file

Firstly we are going to create html file which contains a form with basic fields.

  1. first name
  2. last name
  3. email
  4. password

Index.html

<form name="registerform" onsubmit="return onSubmitHandle()">
              <div class="form-group">
                <label>First Name</label>
                <input
                  id="firstName"
                  type="text"
                  name="firstName"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <label>Last Name</label>
                <input
                  id="lastName"
                  type="text"
                  name="lastName"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <label>Email</label>
                <input
                  id="email"
                  type="text"
                  name="email"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <label>Password</label>
                <input
                  type="password"
                  name="password"
                  id="password"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <label>Confirm Password</label>
                <input
                  type="password"
                  name="confirmPassword"
                  class="form-control"
                />
              </div>
              <div class="form-group">
                <input type="submit" value="Submit" />
              </div>
            </form>

Step 2 : Create script file

We can use inline javascript or a separate javascript file. we will create 3 function.

  1. getElement : To find the input element in dom
  2. isEmpty : To check the input element is empty or not
  3. onSubmitHandler : To check the form validation on submit.

index.js

 function getElement(id) {
      return document.getElementById(id).value;
    }
    function isEmpty(id) {
      if (getElement(id) == '') {
        return true;
      }
      return false;
    }
    function ¸() {
      var isFormValid = true;
      if (isEmpty('firstName')) {
        isFormValid = false;
        alert('Please enter first name');
      } else if (isEmpty('lastName')) {
        isFormValid = false;
        alert('Please enter last name');
      } else if (isEmpty('email')) {
        isFormValid = false;
        alert('Please enter email');
      } else if (isEmpty('password')) {
        isFormValid = false;
        alert('Please enter password');
      }

      return isFormValid;
    }

Working live example and code

Leave a Reply