FormValidation • stringLength validator

Options

Using with form field

^* presents a required option. The HTML attributes are used to set the validator options via the Declarative plugin

Name	HTML attribute	Type	Description
`max`^*	`data-fv-string-length___max` or `maxlength`	Number	The maximum length
`message`	`data-fv-string-length___message`	String	The error message
`min`^*	`data-fv-string-length___min` or `minlength`	Number	The minimum length
`utf8Bytes`	`data-fv-string-length___utf8-bytes`	Boolean	Evaluate string length in UTF-8 bytes. Default to `false`
`trim`	`data-fv-string-length___trim`	Boolean	Indicate the length will be calculated after trimming the value or not. Default to `false`

At least one of min and max options is required.

Using with JavaScript module


// You might need to change the importing path
import stringLength from 'formvalidation/validators/stringLength';

const result = stringLength().validate({
    value: ...,
    options: {
        'case': ...,
        message: ...,
    },
});
/*
result is an object of
{
    valid: true or false,
    message: The error message
}
*/

Basic Example

In the following form, the Full name and Bio fields must be less than 50 and 200 characters respectively.

Demo
Code
Choose framework:
Tachyons
- Bootstrap 4 v4.1.2
- Tachyons v4.10.0

HTML5 Example

When the Declarative plugin is used, the stringLength validator will be turned on automatically if the input uses HTML 5 maxlength or minlength attribute.

Demo
Code
Choose framework:
Tachyons
- Tachyons v4.10.0

Module Example

The following snippet shows how to use the stringLength validator with JavaScript module:


// You might need to change the importing path
import stringLength from 'formvalidation/validators/stringLength';

const res1 = stringLength().validate({
    value: '123456',
    options: {
        max: 10,
        message: 'The input has to be less than 11 characters',
    },
});
// res1.valid === true

const res2 = stringLength().validate({
    value: '1234567890♥',
    options: {
        min: 5,
        max: 10,
        message: 'The input has to be between 5 and 10 characters long',
    },
});
// res2.valid === false

Related validators

The following validators are similar to this one and might be useful to you.

Name	Description
notEmpty	Check if the value an is empty string

stringLength validator