### [How to Set a Minimum Number of Characters on a Text Form Field](https://wpforms.com/developers/how-to-set-a-minimum-number-of-characters-on-a-text-form-field/)

**Published:** February 24, 2021
**Author:** Editorial Team

**Excerpt:** This tutorial will show you how to use JavaScript to set a minimum of characters on a text form field. 

**Content:**

## Introduction

Would you like to set a minimum number of characters for some of your form fields? Inside the form builder, you can already set a maximum number for this field by [following this documentation](https://wpforms.com/docs/how-to-limit-words-or-characters-in-a-form-field/ "How to Limit Words or Characters in a Form Field").

However, using a little JavaScript snippet you can also set a minimum number as well. This can become quite useful if you’d like to set your **Password** field to be a minimum number of characters.

In this tutorial, we’re going to create an example form and apply this minimum number of characters to a **Single Line Text** field, **Password** field and a **Paragraph Text** field.

## Creating your form

Let’s start by creating a new form. Inside our example form we’re going to add the **Name**, **Password** and **Bio (Paragraph Text)** field that will all have a minimum character limit set.

If you need any assistance in creating your form, [please see this documentation](https://wpforms.com/docs/creating-first-form/ "How to Create Your First Form").

![start by creating your form and adding your fields](https://wpforms.com/wp-content/uploads/2022/06/creating-form-wpf-char-limit.jpg)

## Adding the CSS classes

Now we need to add a CSS class name to each of the fields we want to put this minimum character limit on.

While inside the form builder, select the field you wish to edit. By clicking **Field Options** then the **Advanced** we can add our CSS class to the **CSS Classes**. The class you’ll be adding is **wpf-char-min**.

![Add the Class Name to the fields you want to add a minimum character length too](https://wpforms.com/wp-content/uploads/2022/06/wpforms-add-css-classname-min-chars.jpg)

By adding this CSS class, we’re giving JavaScript a flag to look for so it will only run the script on the fields with this CSS class.

Repeat this step for each form field you want to require a minimum amount of characters too. For this example, we’ve only added the CSS class to the **User ID**, **Password** and **Bio** form fields.

## Adding the JavaScript

And finally, to wrap up the functionality, we need to add a small JavaScript code snippet to our site.

If you need help with adding code snippets to your site, [please review this tutorial.](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms")

In our example below, we’re requiring a minimum of **8** characters for the **User ID** and **Password** but increasing the minimum to **25** for the **Bio** field.

Please remember that if you’re using an **[Input Mask](https://wpforms.com/docs/how-to-use-custom-input-masks/ "How to Use Custom Input Masks in WPForms")** on the field, this code snippet will not work.

```

/**
 * Set minimum number of characters
 *
 * @link https://wpforms.com/developers/how-to-set-a-minimum-number-of-characters-on-a-text-form-field/
 */

function wpf_dev_char_min() {
    ?>

**Categories:** Tutorials

**Tags:** Javascript, JS

---