All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

jQuery Form Validation Demo With Source Code

Last Updated : Jul 1, 2023

jQuery Form Validation Demo With Source Code

In this article we will show you the solution of jQuery form validation demo with source code, verifying the relevant data that a user has entered into an input field is known as form validation.

Here, we'll demonstrate the use of jQuery to check the login, password, and confirmed password fields of a straightforward form.

You must include the full jQuery library (jquery.min.js) & also the jQuery validation plugin library in order to use the jQuery Validation Plugin (jquery.validate.js).

Step By Step Guide On jQuery Form Validation Demo With Source Code :-

index.html

<!DOCTYPE html>
<html>
<head>
    <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>
</head>
<body><br>
    <h1 class="text-center text-success">
        Welcome to TalkersCode
    </h1>
    <p class="text-center">
        FORM VALIDATION
    </p>
    <div class="container">
        <div class="col-lg-8
        m-auto d-block">
            <form>
                <div class="form-group">
                    <label for="user">
                        Username:
                    </label>
                    <input type="text" name="username" id="usernames" class="form-control">
                    <h5 id="usercheck" style="color: red;">
                        **Username missing
                    </h5>
                </div>
                <div class="form-group">
                    <label for="user">
                        Email:
                    </label>
                    <input type="email" name="email" id="email" required class="form-control">
                    <small id="emailvalid" class="form-text
                text-muted invalid-feedback">
                        Your email must be a valid email
                    </small>
                </div>
                <div class="form-group">
                    <label for="password">
                        Password:
                    </label>
                    <input type="password" name="pass" id="password" class="form-control">
                    <h5 id="passcheck" style="color: red;">
                        **Please Fill the password
                    </h5>
                </div>
                <div class="form-group">
                    <label for="conpassword">
                        Confirm Password:
                    </label>
                    <input type="password" name="username" id="conpassword" class="form-control">
                    <h5 id="conpasscheck" style="color: red;">
                        **Password didn't match
                    </h5>
                </div>
                <input type="submit" id="submitbtn" value="Submit" class="btn btn-primary">
            </form>
        </div>
    </div>
    <script src="app.js"></script>
</body>
</html>

App.js

$(document).ready(function () {
  $("#usercheck").hide();
  let usernameError = true;
  $("#usernames").keyup(function () {
    validateUsername();
  });
  function validateUsername() {
    let usernameValue = $("#usernames").val();
    if (usernameValue.length == "") {
      $("#usercheck").show();
      usernameError = false;
      return false;
    } else if (usernameValue.length < 3 || usernameValue.length > 10) {
      $("#usercheck").show();
      $("#usercheck").html("**length of username must be between 3 and 10");
      usernameError = false;
      return false;
    } else {
      $("#usercheck").hide();
    }
  }
  const email = document.getElementById("email");
  email.addEventListener("blur", () => {
    let regex = /^([_\-\.0-9a-zA-Z]+)@([_\-\.0-9a-zA-Z]+)\.([a-zA-Z]){2,7}$/;
    let s = email.value;
    if (regex.test(s)) {
      email.classList.remove("is-invalid");
      emailError = true;
    } else {
      email.classList.add("is-invalid");
      emailError = false;
    }
  });
  $("#passcheck").hide();
  let passwordError = true;
  $("#password").keyup(function () {
    validatePassword();
  });
  function validatePassword() {
 let passwordValue = $("#password").val();
    if (passwordValue.length == "") {
      $("#passcheck").show();
      passwordError = false;
      return false;
    }
    if (passwordValue.length < 3 || passwordValue.length > 10) {
      $("#passcheck").show();
      $("#passcheck").html(
        "**length of your password must be between 3 and 10"
      );
      $("#passcheck").css("color", "red");
      passwordError = false;
      return false;
    } else {
      $("#passcheck").hide();
    }
  }
  // Validate Confirm Password
  $("#conpasscheck").hide();
  let confirmPasswordError = true;
  $("#conpassword").keyup(function () {
    validateConfirmPassword();
  });
  function validateConfirmPassword() {
    let confirmPasswordValue = $("#conpassword").val();
    let passwordValue = $("#password").val();
    if (passwordValue != confirmPasswordValue) {
      $("#conpasscheck").show();
      $("#conpasscheck").html("**Password didn't Match");
      $("#conpasscheck").css("color", "red");
      confirmPasswordError = false;
      return false;
    } else {
      $("#conpasscheck").hide();
    }
}
  $("#submitbtn").click(function () {
    validateUsername();
    validatePassword();
    validateConfirmPassword();
    validateEmail();
    if (
      usernameError == true &&
      passwordError == true &&
      confirmPasswordError == true &&
      emailError == true
    ) {
      return true;
    } else {
      return false;
    }
  });
});
  1. You must first create an “index.html” a file having an HTML form in which the user name, email address, password, and confirm password are input fields.
  2. In order to let the browser know which version or HTML we're using, the very first step is to write HTML>. The initial element of the an HTML document is a tag.
  3. The project header should be described using the head> tag. The final brackets are closed, while the title bracket is open, not so with the final brackets.
  4. Next, the script> tag was included. This script tag also contains a description of a code / file we utilised, as well as a javascript run of the google API.
  5. Afterwards the script gets shut down.
  6. After this comes the <body> element, which defines the content of the webpage. The material of the website is written here.
  7. To use the form controls in Bootstrap, we will require Bootstrap 4. Include the "app.js" file, which contains jQuery code and form validation, near the bottom of a "body" element.
  8. As seen in the code below,create a app.js file that verifies the entire form.
  9. Whenever the document is complete, remove all error messages from the app.js file. Verify all of the input areas, including the username,email,password, and confirm password.

Conclusion :-

Client-side form validation is quite beneficial and makes your website more user-friendly when confirming a form.

Although there are various methods for performing client-side validation on HTML forms, this jQuery Validation Plugin appears to be the most straightforward.

The jQuery Valid Plugin easily implements form validation with a range of customization options.

I hope this article on jQuery form validation demo with source code helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪