Revolutionize Form Design: A Game-Changer for Developers and Users Alike

When it comes to creating engaging online dialogues, form design plays a crucial role. While validation is essential, it’s equally important to focus on the user experience. By designing forms that mirror real-life interactions, we can make our lives as developers easier while also delighting our users. One powerful tool that enables us to do just that is Cleave.js.

What is Cleave.js?

Cleave.js is a JavaScript library that formats input values in real-time, mimicking their real-life equivalents. This innovative approach simplifies the user experience, making it easier for them to fill out forms accurately.

The Power of Cleave.js: 6 Formatting Options

Cleave.js offers six formatting options, including:

• Credit card numbers
• Phone numbers
• Date formatting
• Time formatting
• Numeral formatting
• Custom formatting (with prefixes, blocks, and delimiters)

Building a Donation Form with Cleave.js and React

To demonstrate the capabilities of Cleave.js, let’s create a simple donation form using React. We’ll explore six formatting options, showcasing the library’s versatility.

Credit Card Formatting: A Proactive Approach

By setting the creditCard property to true, we can format credit card numbers as users type. To take it a step further, we can use the onCreditCardTypeChanged event handler to detect the credit card provider, providing a more engaging experience.

import React from 'eact';
import Cleave from 'cleave.js';

const CreditCardInput = () => {
  const creditCardInput = new Cleave('input#credit-card', {
    creditCard: true,
  });

  creditCardInput.onCreditCardTypeChanged((type) => {
    console.log(`Credit card type changed to ${type}`);
  });

  return (
    
  );
};

Date Formatting: Simplifying Input

With Cleave.js, we can easily format dates using the datePattern property. This ensures that users enter dates in a consistent and readable format.

import React from 'eact';
import Cleave from 'cleave.js';

const DateInput = () => {
  const dateInput = new Cleave('input#date', {
    datePattern: ['Y', '', 'd'],
  });

  return (
    
  );
};

Block Formatting: Enforcing Input Length

Cleave.js allows us to define block lengths, ensuring that users enter input within specified limits. This is particularly useful for CVV inputs, where we can restrict the input length to three digits.

import React from 'eact';
import Cleave from 'cleave.js';

const CvvInput = () => {
  const cvvInput = new Cleave('input#cvv', {
    blocks: [3],
  });

  return (
    
  );
};

Numeral Formatting: Thousand Separators and More

By setting the numeral property to true, we can format numerical inputs with thousand separators, making it easier for users to enter large numbers accurately.

import React from 'eact';
import Cleave from 'cleave.js';

const NumeralInput = () => {
  const numeralInput = new Cleave('input#numeral', {
    numeral: true,
  });

  return (
    
  );
};

Phone Number Formatting: Locale-Specific Solutions

Cleave.js provides phone number formatting options, including support for locale-specific codes. We can import the necessary locale files and set the phoneRegionCode property to ensure accurate formatting.

import React from 'eact';
import Cleave from 'cleave.js';
import 'cleave.js/dist/addons/cleave-phone.i18n';

const PhoneNumberInput = () => {
  const phoneNumberInput = new Cleave('input#phone-number', {
    phone: true,
    phoneRegionCode: 'US',
  });

  return (
    
  );
};

Custom Formatting: Unleashing Creativity

Cleave.js offers custom formatting options, allowing us to create unique input formats for specific use cases. This feature is particularly useful for applications that require cryptic passphrases or specific input patterns.

import React from 'eact';
import Cleave from 'cleave.js';

const CustomInput = () => {
  const customInput = new Cleave('input#custom', {
    prefix: '+',
    blocks: [3, 3, 4],
  });

  return (
    
  );
};

Form Submission: Remember to Validate

While Cleave.js is designed for formatting, it’s essential to remember that validation is still necessary. Before submitting forms, ensure that you validate user input to prevent errors.

Get started with Cleave.js by checking out the CodeSandbox example and exploring the official Cleave.js website and GitHub project.