How to make Form Validation with basic jQuery

Step1: Add JQuery Library

You can use CDN or download it from jQuery site Download.

CDN:

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js

You can use direct CDN url or copy CDN link and paste to your browser and save file to your site directory.

Include one of them to HTML file before </body> end tag.

Like This:

This is CDN path:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
This is Local directory path:
<script type="text/javascript" src="[your local path]"></script>

Step2: Add jQuery Validation Plugin

CDN

https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js

You can use direct CDN url or copy below link and paste to your browser and save file to your site directory.

Include one of them to HTML file before </body> end tag and below jQuery Library script.

Like This:

This is CDN path:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.1/jquery.validate.min.js"></script>
This is Local directory path:
<script type="text/javascript" src="[your local path]"></script>

Step 3: Add HTML Form

<form class="registration" name="registration" action="" method="post">
	<h1>Registration Form</h1>
	<div class="feild_wrap">
		<label>Full Name*</label>
		<input type="text" class="form-control" name="fullname" value=""/>
	</div>
	<div class="feild_wrap">
		<label>Phone*</label>
		<input type="tel" class="form-control" name="phone" value=""/>
	</div>
	<div class="feild_wrap">
		<label>Email*</label>
		<input type="email" class="form-control" name="email" value=""/>
	</div>
	<div class="feild_wrap">
		<label>Password*</label>
		<input type="password" class="form-control" name="password" value=""/>
	</div>
	<div class="feild_wrap">
		<input class="submit_button" type="submit" value="SUBMIT"/>
	</div>
</form>

Step 4: Add Form style

body {margin:0px;}
* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.registration {padding:20px;}
.registration .feild_wrap {
    padding-top:16px; padding-bottom:16px;
}
.registration .feild_wrap label {
    font-size:16px;
    line-height:24px;
    letter-spacing: 0.050em;
    text-transform: uppercase;
    display: block;
    color: #000000;
    margin-bottom: 8px;
}
.registration .form-control {
    border: #8f8f8f 1px solid;
    border-radius: 10px;
    padding: 22px;
    font-size: 19px;
    line-height: 24px;
    color: #000000;
    background-color: transparent;
    width: 100%;
}
.registration .submit_button {
    border: none;
    background-color: #000000;
    border-radius: 10px; color:#ffffff;
    padding: 36px;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 36px;
    letter-spacing: 0.050em;
    cursor: pointer;
    min-height: 100px;
    width: 100%;
}
.registration input.error {
    border-color: #ff0000;
}
.registration label.error {
    color: #ff0000;
}

Create Validation Rules

1. Create new JS file name “form-validation.js”
2. Copy this code in newly crated JS file.
3. Include it below “jquery.validate.min.js” file.

jQuery(function() 
  /* Form name attribute "registration" */
  jQuery("form[name='registration']").validate({
	/* Specify validation rules */
	rules: {
	/* The key name on the left side is the name attribute
	  of an input field. Validation rules are defined
	 on the right side */
	  fullname: "required",
	  phone: "required",
	  email: {
		required: true,
		/* Specify that email should be validated
		 by the built-in "email" rule */
		email: true
	  },
	  password: {
		required: true,
		minlength: 8
	  }
	},
	/* Specify validation error messages */
	messages: {
	  fullname: "Please enter your Full name",
	  phone: "Please enter your phone",
	  email: "Please enter a valid email address"
		},
	  password: {
		required: "Please provide a password",
		minlength: "Your password must be at least 8 characters long"
	  },
	  
	/* Make sure the form is submitted to the destination defined
	 in the "action" attribute of the form when valid */
	submitHandler: function(form) {
	  form.submit();
	}
  });

Include Like this:
<script type="text/javascript" src="js/form-validation.js"></script>

This is the how you can validate form with jQuery.