Guide
Validators
Plugins
Examples
Updates
Purchase
Getting Started
Validators
Plugins
API
Events

notEmpty validator

Check if the value an is empty string

Options

Using with form field
The HTML attributes are used to set the validator options via the Declarative plugin
NameHTML attributeTypeDescription
messagedata-fv-not-empty___messageStringThe error message
trimdata-fv-not-empty___trimBooleanIf true, all spaces at the beginning and the end of field value will be removed before being validated. It is false by default
Use with select element
If you want a select element to be required, you have to set value="" for the option which is treated as empty one:
<select name="gender">
    <option value="">Select the gender</option>
    <option value="male">Male</option>
    <option value="female">Female</option>
    <option value="other">Other</option>
</select>
Using the ES6 module
// You might need to change the importing path
import { notEmpty } from '/vendors/@form-validation/cjs/validator-not-empty';


const result = notEmpty().validate({
    value: ...,
    options: {
        message: ...,
    },
});
/*
result is an object of
{
    valid: true or false,
    message: The error message
}
*/
Using the npm package
  • Install the validator package:
$ npm install @form-validation/validator-not-empty
  • Use the notEmpty validator:
import { notEmpty } from '@form-validation/validator-not-empty';


const result = notEmpty().validate({
    value: ...,
    options: {
        message: ...,
    },
});
The MandatoryIcon plugin is useful when you want to display the mandatory icon for required fields

Basic example

In the following form, user is asked to enter the full name.
Basic example

HTML5 example

When the Declarative plugin is used, the notEmpty validator will be turned on automatically if the input uses HTML 5 required attribute.
HTML5 example

NPM package example

The following snippet shows how to use the notEmpty validator with the npm package:
import { notEmpty } from '@form-validation/validator-not-empty';


const res1 = notEmpty().validate({
    value: 'John Smith',
    options: {
        message: 'The name is required',
    },
});
// res1.valid === true


const res2 = notEmpty().validate({
    value: '',
    options: {
        message: 'The name is required',
    },
});
// res2.valid === false


const res3 = notEmpty().validate({
    value: '   ',
    options: {
        message: 'The name is required',
    },
});
// res3.valid === true

See also

Changelog

v2.0.0
  • Add the npm package
v1.7.0
  • Provide new trim option
meid validatornumeric validator