JavaScript - Introduction to Cleave.js library

Screenshot from the tutorial

Introduction to Cleave.js: A JavaScript Library for Input Formatting

In modern web development, managing user input can be challenging, especially when it comes to ensuring that the data entered conforms to specific formats. This is where Cleave.js comes into play. In this blog post, we will explore what Cleave.js is, how to set it up, and demonstrate its capabilities in formatting input fields seamlessly.

What is Cleave.js?

Cleave.js is a lightweight JavaScript library designed to make input formatting in web applications easier. It allows developers to specify rules for how input should be formatted, thereby improving user experience and ensuring data integrity. Common use cases include formatting phone numbers, credit card numbers, and dates.

Key Features of Cleave.js

• Lightweight: Cleave.js is a small library, making it easy to integrate into existing projects without adding significant overhead.
• Flexible Formatting: The library supports various formatting options, allowing developers to customize how input is displayed.
• Easy to Use: With a simple API, developers can quickly set up and apply formatting to input fields.

Getting Started with Cleave.js

Step 1: Installation

You can easily include Cleave.js in your project via a CDN or by installing it through npm.

Using CDN

Add the following script tag to your HTML file:

<script src="https://cdn.jsdelivr.net/npm/cleave.js/dist/cleave.min.js"></script>

Using npm

If you're using npm, you can install Cleave.js with the following command:

npm install cleave.js

Step 2: Basic Usage

Now that you have Cleave.js included in your project, let's see how to use it to format an input field.

HTML Setup

First, create an input field in your HTML:

<input type="text" id="phone" placeholder="Enter your phone number">

JavaScript Initialization

Next, set up Cleave.js in your JavaScript file. You can initialize it by selecting your input field and specifying the format you want.

const cleave = new Cleave('#phone', {
    phone: true,
    phoneRegionCode: 'US', // Specify your region code
});

In this example, we are formatting the input field as a phone number, automatically applying the correct format based on the specified region code.

Advanced Formatting Options

Cleave.js offers several formatting options that make it versatile for various input needs. Here are a few examples:

Credit Card Formatting

To format a credit card input, you can use the following code:

<input type="text" id="credit-card" placeholder="Enter your card number">

const cleaveCard = new Cleave('#credit-card', {
    creditCard: true,
    onCreditCardTypeChanged: function (type) {
        console.log(type); // You can execute some action based on the card type
    }
});

Date Formatting

For date inputs, Cleave.js allows you to specify the format easily:

<input type="text" id="date" placeholder="DD/MM/YYYY">

const cleaveDate = new Cleave('#date', {
    date: true,
    datePattern: ['d', 'm', 'Y'],
});

Conclusion

Cleave.js is a powerful tool for enhancing user input in web applications. Its ability to format inputs accurately and effortlessly can greatly improve the user experience and reduce errors in data entry. Whether you're formatting phone numbers, credit card information, or dates, Cleave.js provides a straightforward solution.

To learn more and dive deeper into the library, check out the Cleave.js documentation. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios