How To Validate Form Using jQuery Validate.js

In this article, we will explore the process of validating forms using jQuery and the Validate.js library. We'll dive into frontend form validation and utilize Validate.js, a lightweight JavaScript library that offers a declarative approach to validating JavaScript objects.

This library, inspired by CodeIgniter, requires no external dependencies and is incredibly compact, with a gzipped size of just over 2kb.

We'll demonstrate how to validate various input fields using jQuery and the Validate.js library. While backend validation is essential, it typically occurs after the form is submitted.

With frontend validation, we can provide real-time feedback to users, enhancing the user experience and data accuracy.

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.

CDN

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>

 

npm/node.js

Also, you can install it using the npm command and use it. 

$ npm install --save validate.js
var validate = require("validate.js");

 

Bower

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:

how_to_validate_form_using_jquery_validate_js_output

 


You might also like:

techsolutionstuff

Techsolutionstuff | The Complete Guide

I'm a software engineer and the founder of techsolutionstuff.com. Hailing from India, I craft articles, tutorials, tricks, and tips to aid developers. Explore Laravel, PHP, MySQL, jQuery, Bootstrap, Node.js, Vue.js, and AngularJS in our tech stack.

RECOMMENDED POSTS

FEATURE POSTS