Form Validation in Jquery - WebJourney
Hello friends, Today we will learn form validation in jquery. I will show you simply form validation in jQuery. We will check input fields empty or not and display validation error message. If no errors found in jquery form validation we will show a message form submitted.
Output:
Step 1. Html Code
We will use two input fields name and email in our html markup.
<form method="post" action="#">
<h4 class="text-success mb-5">Form Validation in jQuery - WebJourney</h4>
<p class="empty_err"></p>
<div class="mb-3">
<label for="name">Name (<small class="text-danger">Accept only charecter</small>)</label>
<input type="text" class="form-control" id="name" />
<small class="name_err"></small>
</div>
<div class="mb-3">
<label for="email">Email (<small class="text-danger">Must be a email</small>)</label>
<input type="text" class="form-control" id="email" />
</div>
<div class="mb-3">
<input type="submit" class="btn btn-success" class="form-control" id="submit_form" value="Submit" />
</div>
</form>
Step 2. JQuery Code
In this step we will get the input fields value and placed them into two variables name and email and inside if condition check these two variable is empty or not. If it is empty then an error message appear and no error a success message appear.
$(document).on("click", "#submit_form", function (e) {
e.preventDefault();
let name = $("#name").val();
let email = $("#email").val();
if (name == "" || email == "") {
$(".empty_err").html('<p class="text-danger">Please fill all Fileds.</p>');
return false;
} else {
$(".empty_err").html('<p class="text-success">Form successfully Submitted.</p>');
}
});
Step 3. Full Code
We use bootstrap cdn link for a better design and jQuery cdn link.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Validation in jQuery - WebJourney</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="offset-md-3 col-md-6">
<form method="post" action="#">
<h4 class="text-success mb-5">Form Validation in jQuery - WebJourney</h4>
<p class="empty_err"></p>
<div class="mb-3">
<label for="name">Name (<small class="text-danger">Accept only charecter</small>)</label>
<input type="text" class="form-control" id="name" />
<small class="name_err"></small>
</div>
<div class="mb-3">
<label for="email">Email (<small class="text-danger">Must be a email</small>)</label>
<input type="text" class="form-control" id="email" />
</div>
<div class="mb-3">
<input type="submit" class="btn btn-success" class="form-control" id="submit_form" value="Submit" />
</div>
</form>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
//todo:slug generate
$(document).ready(function (e) {
$(document).on("click", "#submit_form", function (e) {
e.preventDefault();
let name = $("#name").val();
let email = $("#email").val();
let phone = $("#phone").val();
let password = $("#password").val();
if (name == "" || email == "") {
$(".empty_err").html('<p class="text-danger">Please fill all Fileds.</p>');
return false;
} else {
$(".empty_err").html('<p class="text-success">Form successfully Submitted.</p>');
}
});
});
</script>
</body>
</html>
If you like what you are reading, please think about buying us a coffee as a token of appreciation.
We appreciate your support and are committed to providing you useful and informative content.
We are thankful for your ongoing support
You May Also Like:
How to setup jQuery with Laravel 10 and vite - WebJourney
Realtime Check Password and Confirm Password is Match or not in jQuery Javascript
jQuery Javascript Dynamic Slug Generate - WebJourney
Dynamic Dependent Dropdown Laravel 10 jQuery Ajax(Category SubCategory)