jQuery Form Validation Demo With Source Code
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Anjali
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;
}
});
});
- 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.
- 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.
- 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.
- 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.
- Afterwards the script gets shut down.
- After this comes the <body> element, which defines the content of the webpage. The material of the website is written here.
- 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.
- As seen in the code below,create a app.js file that verifies the entire form.
- 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.
About Anjali
