Categories

Wednesday, December 4, 2024
#919814419350 therichposts@gmail.com
HtmlJquery

How to add custom jquery validation to simple contact form?

add custom jquery validation to simple contact form

Hello, welcome to therichpost.com. 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>
<html>
<head>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script>
jQuery(document).ready(function($){
/*Button click event*/
$(“.btn-info”).click(function(){
/*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”);
a++;
}
else
{
$(“#username”).removeAttr(“style”);
a=0;
}
if(pwd == “”)
{
$(“#pwd”).css(“border”, “2px solid red”);
b++
}
else
{
$(“#pwd”).removeAttr(“style”);
b=0;
}
if(a == 0 && b == 0)
{
alert(“You are Done !!”);
}
else
{
return false;
}
});
});
</script>
</head>
<body>
<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>
<div class=”form-group”>
<label for=”pwd”>Password:</label>
<input type=”password” class=”form-control” id=”pwd” placeholder=”Enter password” name=”pwd”>
</div>
<button type=”submit” class=”btn btn-info”>Submit</button>
</form>
</div>
</div>
</body>
</html>

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. Therichpost.com

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

4 Comments

Leave a Reply

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