How To Validate Form Using jQuery Validate.js
In this article, we will see how to validate forms using jquery validate.js. Here, we will learn about frontend jquery validation using validate.js. Validate.js provides a declarative way of validating javascript objects. Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 2kb gzipped.
We will validate different input fields using the jquery validate.js library. Also, you can validate using the backend side but it can be possible after the form submit.
Learn More: Validate.js
So, let's see the validate.js form example, form validation using jquery, email validation using jquery, checkbox validation using jquery, and URL validation using jquery.
There are three ways you can use validate js.
You can use the CDN file to validate the form.
<script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
OR
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
Also, you can install it using the npm command and use it.
$ npm install --save validate.jsvar validate = require("validate.js");
Also, you can install validate js using bower.
$ bower install --save validate.js
Example:
<!DOCTYPE html>
<html>
<head>
<title>How to validate form using jquery validate.js - Techsolutionstuff</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<style>
label.error {
color: red;
}
</style>
<body>
<div class="col-md-6 ml-2">
<div id="top-nav" class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header">
<h4 class="mt-2">How to validate form using jquery validate.js - Techsolutionstuff</h4>
</div>
</div>
</div>
<div class="container-fluid">
<form id="myForm" data-validate="true" data-checkrealtime="true">
<div id="field1">
<div class="form-group">
<label for="name">Your name</label>
<input class="form-control" id="name" name="name" type="text" placeholder="type your name"/>
</div>
<div class="form-group">
<label for="mobile">mobile number</label>
<input class="form-control" id="mobile" name="mobile" type="text" placeholder="type your mobile number"/>
</div>
<div class="form-group">
<label for="email">Email</label>
<input class="form-control" id="email" name="email" type="text" placeholder="type your email"/>
</div>
<div class="form-group">
<label for="url">Website</label>
<input class="form-control" id="website" name="website" type="text" placeholder="type your website name"/>
</div>
<div class="form-group">
<input id="accept" name="accept" type="checkbox"/>
<span>Accept conditions</span>
</div>
<div class="button-group">
<button id="submitBtn" type="submit" class="btn btn-info" data-checkform="true">Submit</button>
</div>
</div>
</form>
</div>
</div>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('#myForm').validate({ // initialize the plugin
rules: {
name: {
required: true,
},
mobile: {
required: true,
minlength: 8
},
email : {
required: true,
email: true
},
website: {
url: {
allowDataUrl: true
}
},
accept: {
required: true,
}
}
});
});
</script>Output:
You might also like:
- Read Also: Laravel 8 Image Upload Validation
- Read Also: Laravel 8 Form Validation Example
- Read Also: Laravel Unique Validation on Update
- Read Also: How To Generate Invoice PDF In Laravel 9
