Home Html How to add custom jquery validation to simple contact form?

How to add custom jquery validation to simple contact form?

by therichpost
Published: Last Updated on 4 comments

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

You may also like


alexa March 1, 2018 - 5:15 am

good one and show some form in tabs and validations

therichpost March 1, 2018 - 5:15 am

Okay sure alexa

Danielnum October 25, 2018 - 8:10 am

Hello! Here is an interesting offering for you.

Ajay Malhotra October 25, 2018 - 2:56 pm

Yes, please tell…


Leave a Comment

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