How to Make jQuery client side form validation

Hello viewer, in this article I will teach you how to create a jQuery client side form validation. If you have create a contact form you also need form validation for collect correct information from user side. So in this project I will tell you how to make jQuery form validation.

How to Make JavaScript Client side form Validation

It’s very simple and very useful for collect contact details. So let’s start our project. First step you make an html document then copy the below code and paste your html document.

How To Make Website Using HTML & CSS | Full Responsive Website Design Step by Step

HTML Code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	
  
  <form action="" name="registration">
  	<h2>Registration</h2>
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" id="firstname" placeholder="Manoj">

    <label for="lastname">Last Name</label>
    <input type="text" name="lastname" id="lastname" placeholder="Adhikari">

    <label for="email">Email</label>
    <input type="email" name="email" id="email" placeholder="manoj@.com">

    <label for="password">Password</label>
    <input type="password" name="password" id="password" placeholder="●●●●●">

    <button type="submit">Register</button>
  </form>

  


<script src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript">
	
$(function() {
  
  $("form[name='registration']").validate({

    rules: {
     
      firstname: "required",
      lastname: "required",
      email: {
        required: true,
        email: true
      },
      password: {
        required: true,
        minlength: 5
      }
    },

    messages: {
      firstname: "Please enter your firstname",
      lastname: "Please enter your lastname",
      password: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      email: "Please enter a valid email address"
    },
    
    submitHandler: function(form) {
      form.submit();
    }
  });
});
</script>
</body>
</html>

Copy the css code in below and paste in your css document

CSS Code

@import url("https://fonts.googleapis.com/css?family=Open+Sans");

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
  font-size: 14px;
  background: #f7ddcc;
}

form {
  padding: 30px;
  background: white;
  color: black;
  border-radius: 4px;
  width: 350px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  box-shadow: 6px 9px 15px 6px #4c4b4b3d;
}
h2{
  color: #e59f6e;
    text-align: center;
    margin-bottom: 30px;
}
form label,
form input,
form button {
  border: 0;
  margin-bottom: 3px;
  display: block;
  width: 100%;
}
form label{
  margin-top: 10px;
}
form input {
  background: #fff;
  color: #000;
  padding: 0 6px;
  box-sizing: border-box;
  border: 1px solid #7e7c7c;
  padding: 10px;
  outline:none;
}
form button {
  padding:10px;
  background: #e19f73;
  color: #fff;
  font-size: 16px;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
}
form .error {
  color: #ff0000;
}


if you have any issue to understand this code please watch video

Leave a Reply

Your email address will not be published. Required fields are marked *