Friday, April 12, 2024

How to add custom jquery validation to simple contact form?

add custom jquery validation to simple contact form

Hello, welcome to In this post, I will tell you How to add custom jquery validation to simple contact form? I personally like jquery very much. Most of my code is full with jquery. When I stuck in php or other language then that stuckness I remove with jquery code. Today i am going to start with simple jquery code to contact form validation.

Here is the first image of form without jquery action:

Here is the Second image of form after jquery action:

Here is the working html and jquery script and first you have to make “test.html” file and run that file and check the working validation example:

<!DOCTYPE html>
<link rel=”stylesheet” href=””>
<script src=””></script>
<script src=””></script>
/*Button click event*/
/*Getting Input values in jquery varibales*/
var username = $(“#username”).val();
var pwd = $(“#pwd”).val();
var a = 0;
var b = 0;
/*Validation Check*/
if(username == “”)
$(“#username”).css(“border”, “2px solid red”);
if(pwd == “”)
$(“#pwd”).css(“border”, “2px solid red”);
if(a == 0 && b == 0)
alert(“You are Done !!”);
return false;
<div class=”container”>
<h3>Jquery Tricks..</h3>
<div class=”col-md-3″>
<form action=”/action_page.php”>
<div class=”form-group”>
<label for=”email”>Email:</label>
<input type=”text” class=”form-control” id=”username” placeholder=”Enter Name” name=”name”>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” placeholder=”Enter password” name=”pwd”>
<button type=”submit” class=”btn btn-info”>Submit</button>

There are so many jquery code, tricks and i will let you know all. Please do comment if you any query related to this post. Thank you.

the authortherichpost
Hello to all. Welcome to Myself Ajay Malhotra and I am freelance full stack developer. I love coding. I know WordPress, Core php, Angularjs, Angular 14, Angular 15, Angular 16, Angular 17, Bootstrap 5, Nodejs, Laravel, Codeigniter, Shopify, Squarespace, jQuery, Google Map Api, Vuejs, Reactjs, Big commerce etc.


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.