formstrap offers custom validation error messages. To see the validation types that are available for each field, check out the fields crib sheet.
formstrap uses the browser's native client-side validation method. Bootstrap's proprietary method is not currently supported as it is not accessible and results in layout shifts.
Please note if you don't supply a validation error message the input will still be checked and the browser's default error message will be displayed if validation fails.
On multi-page forms if the field that has failed validation is on a different page, the user is informed and then taken to the relevant page before the validation error is displayed.
Required
If you specify a field is required and a value is not input then this error will be displayed.
- Missing
A value has not been provided in a required field
Please note on checkbox fields, if required is specified this means at least one checkbox must be ticked.
If a field input is not required then the following validation types are only tested if the field has a value.
Min and Max Length
If you specify values in the min-length and max-length fields on the field metadata form then you can specify two custom error messages.
- Too Short
The custom error is displayed if the length of the input value is less than the minimum length specified. - Too Long
The custom error is displayed if the length of the input value is greater than the maximum length specified.
You would use this if you wanted to restrict the length of the input or require that it is a minimum length.
Please note that even if you specify a min length of 5, if the field input is empty then this will NOT trigger the error. You must also state that the field is required.
Min and Max Value; and Step
If you specify values in the min, max and step fields on the field metadata form then you can specify three custom error messages.
- Range Under
The custom error is displayed if the value entered is less than the specified minimum value. - Range Over
The custom error is displayed if the length of the value entered is greater than the specified maximum value. - Step Mismatch
The custom error is displayed if the value entered does not match the requirements of the step validation. E.g. a step validation of 1 would require that only integers (whole numbers) are accepted by the input.
You could this sort of validation if a field asking for someone's age requires that they be 18 or over.
Pattern
If you input a pattern into the field metadata form then you can specify the following custom error message.
- Pattern Mismatch
The input text does not match the pattern.
The pattern must be a valid, Unicode aware regular expression (it is compiled using the "v" flag). For example this pattern [a-zA-Z0-9]{10} would require that the input only contains letters and numbers and is 10 characters long.
The forward slashes that are often used to enclose a regular expression should be omitted.
Type
If, say, you specify a particular field type (e.g. an email) and the user inputs a value that is not a valid email then you can specify a custom error:
- Type Mismatch
The value input is not of the type specified.
Event Initiated Custom Alert
This validation error is used if you invoke a custom error as a result of a user-driven event.