How to make form validation in javascript

How to make form validation in javascript

How to make form validation in javascript; Validation is the main feature of any website. It help to get proper input from user. In this tutorial we will see how to define rules for validation step by step. We will create a form which take input from user we will define rules which describe what or which type values we want. If user enter a incorrect value we will show a error which describe user to enter a correct value.

 

In this tutorial we will use bootstrap CDN for styling of our page and javascript for the functionality for validation.

 

How to make form validation in javascript

There are some steps which are required to make form validation in javascript

 

Step 01: index.html file creating

Step 02: main.js file creating

Step 03: Testing

Step 01: index.html file creating

First step is to create a file with the name of index.html and open it into your favourite code editor and update with given code:

<!DOCTYPE html>
<html>
<head>
  <title>How to make form validation in JavaScript - TheSkillStock</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-12 m-3 pt-3">
        <div class="card">
          <div class="card-header text-center bg-info">Form Validation In JavaScript</div>
          <div class="card-body">
            <form action="#" onsubmit="return validation()">
              <div class="form-group mb-3">
                <label for="name" class="font-weight-regular">Enter Your Name </label><br>
                <span id="Name" class="text-danger font-weight-regular"> </span>
                <input type="text" name="name" class="form-control" id="name" />
              </div>

              <div class="form-group mb-3">
                <label class="font-weight-regular">Enter Your Email </label><br>
                <span id="emailids" class="text-danger font-weight-regular"> </span>
                <input type="text" name="email" class="form-control" id="emails" />
              </div>

              <div class="form-group mb-3">
                <label for="user" class="font-weight-regular">Enter Your Username </label><br>
                <span id="username" class="text-danger font-weight-regular"> </span>
                <input type="text" name="user" class="form-control" id="user" />
              </div>

              <div class="form-group">
                <label class="font-weight-regular">Enter Your Password </label><br>
                <span id="passwords" class="text-danger font-weight-regular"></span>
                <input type="password" name="pass" class="form-control" id="pass"/>
              </div>

              <div class="form-group">
                <label class="font-weight-regular">Enter Your Password Again </label><br>
                <span id="confrmpass" class="text-danger font-weight-regular"></span>
                <input type="password" name="conpass" class="form-control" id="conpass"/>
              </div>

              <div class="form-group">
                <label class="font-weight-regular">Enter Your Mobile Number </label><br>
                <span id="mobileno" class="text-danger font-weight-regular"> </span>
                <input type="text" name="mobile" class="form-control" id="mobileNumber"/>
              </div>

              <input type="submit" name="submit" value="Submit" class="btn btn-info form-control"/>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <script src="main.js"></script>
</body>
</html>

 

Step 02: main.js file creating

So the main step in this tutorial is to provide functionality to our website. Create a file with the name of main.js and update with given code:

function validation() {
    var name = document.getElementById("name").value;
    var user = document.getElementById("user").value;
    var pass = document.getElementById("pass").value;
    var confirmpass = document.getElementById("conpass").value;
    var mobileNumber = document.getElementById("mobileNumber").value;
    var emails = document.getElementById("emails").value;

    if (name == "") {
        document.getElementById("Name").innerHTML =
            "Name field is Required";
        return false;
    }

    if (emails == "") {
        document.getElementById("emailids").innerHTML =
            "Email Field is Required";
        return false;
    }
    if (emails.indexOf("@") <= 0) {
        document.getElementById("emailids").innerHTML = "Your Entered Email is Invalid";
        return false;
    }

    if (
        emails.charAt(emails.length - 4) != "." &&
        emails.charAt(emails.length - 3) != "."
    ) {
        document.getElementById("emailids").innerHTML = "Your Entered Email is Invalid";
        return false;
    }

    if (user == "") {
        document.getElementById("username").innerHTML =
            "Username Field is Required";
        return false;
    }
    if (user.length <= 3 || user.length > 20) {
        document.getElementById("username").innerHTML =
            "Username lenght must be between 3 and 20";
        return false;
    }
    if (!isNaN(user)) {
        document.getElementById("username").innerHTML =
            "Username must be in Character Form";
        return false;
    }

    if (pass == "") {
        document.getElementById("passwords").innerHTML =
            "Password Field is Required";
        return false;
    }
    if (pass.length <= 5 || pass.length > 20) {
        document.getElementById("passwords").innerHTML =
            "Passwords lenght must be between 5 and 20";
        return false;
    }

    if (pass != confirmpass) {
        document.getElementById("confrmpass").innerHTML =
            "Password and Confirm Password is not matched";
        return false;
    }

    if (confirmpass == "") {
        document.getElementById("confrmpass").innerHTML =
            "Confrm Password Field is Required";
        return false;
    }

    if (mobileNumber == "") {
        document.getElementById("mobileno").innerHTML =
            "Mobile Number Field is Required";
        return false;
    }
    if (isNaN(mobileNumber)) {
        document.getElementById("mobileno").innerHTML =
            "Mobile Number Must be in Digits";
        return false;
    }
    if (mobileNumber.length != 11) {
        document.getElementById("mobileno").innerHTML =
            "Mobile Number must be 11 digits only";
        return false;
    }
}

 

Step 03: Testing

Now our tutorial is completed its time to run and test our work. So open index.html file in your favourite browser and test it.

 

Thank you for reading this tutorial

You may also like this:

 

CRUD System app in Laravel 9


Login and Registration system in php


How to show models data into blade file in laravel


How to Install Bootstrap 5 in Laravel 9 With Vite


Laravel 9 Custom Login and Registration System

How to generate faker data in laravel using seeder

Comments

No Comment posted Yet!

Leave a Reply

OK! You can skip this field.