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
- Create new JS file name “form-validation.js”
- Copy this code in newly crated JS file.
- 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.