Skip to main content

Format and validate a form field

Clean a field's value while the user types, and then check it, using the same name for both steps.

Before you begin​

Clean and check a field​

  1. While the user types, pass the value through formatters with the field type:

    const shown = formatters(raw, "pan");   // "abcde 1234f" becomes "ABCDE1234F"

  2. When the field loses focus or the form is submitted, check the value with validators and the same name:

    const result = validators(shown, "pan", { required: true, label: "PAN" });

  3. If result.valid is false, show result.message next to the field.

The field now accepts only the characters that the type allows, and shows one clear message when the value is wrong. On the server, call validators with the same name and options to get the same answer.

Add limits to a field​

Options add checks on top of the field type. For example, to accept an amount of at least 100:

validators(value, "amount", { minValue: 100 })

When an option that you added fails, the result's code is that option, here minValue. When the field type's own check fails, the code is the field type's name. For every option, see validators().

Field types​

These names work with both formatters and validators:

Field typeWhile typing, formattersOn check, validators accepts
amountKeeps digits and one decimal point, with two decimal placesA number of 0 or more, with up to two decimals
weightKeeps digits and one decimal point, with three decimal placesA number of 0 or more, with up to three decimals
percentageKeeps digits and one decimal point, with two decimal places and at most six charactersA number from 0 to 100, with up to two decimals
decimalUpTo2Keeps digits and one decimal point, with two decimal placesA number of 0 or more, with up to two decimals
decimalUpTo6Keeps digits and one decimal point, with six decimal placesA number of 0 or more, with up to six decimals
mobileKeeps digits, at most 10A 10-digit mobile number
pincodeKeeps digits, at most sixA six-digit Postal Index Number (PIN) code
emailTrims and converts to lower caseAn address in the form name@domain.tld
panConverts to upper case, keeps letters and digits, at most 10A Permanent Account Number (PAN), such as ABCDE1234F
gstinConverts to upper case, keeps letters and digits, at most 15A Goods and Services Tax Identification Number (GSTIN), such as 27ABCDE1234F1Z5
ifscConverts to upper case, keeps letters and digits, at most 11An Indian Financial System Code (IFSC), such as HDFC0001234
iecConverts to upper case, keeps letters and digits, at most 10An Importer-Exporter Code (IEC) of 10 letters or digits
vehicleNumberConverts to upper case, keeps letters and digits, at most 10A vehicle registration number, such as KA01AB1234 or 22BH1234AA

Some names exist on one side only:

  • Only validators: integer, positiveNumber, pastDate, futureDate, and the base rules such as number and date
  • Only formatters: decimalUpTo1, decimalUpTo3, decimalUpTo4, decimalUpTo5, and the base formatters such as trim and titleCase

For a field without a shared name, pick a formatter and a validator separately, for example formatters(v, "numbersOnly") with validators(v, "integer").

For the message each check shows, see Error codes and messages.

Next steps​