Instance setting
The library has a way to specify a default config that will be used for all fields (don't worry you could customize everything for each field as well). Also, it contains some specific settings, applied to the whole instance.
For example, the full settings looks like this:
new JustValidate(
form: string | Element,
globalConfig?: {
errorFieldStyle: Partial<CSSStyleDeclaration>,
errorFieldCssClass: string | string[],
errorLabelStyle: Partial<CSSStyleDeclaration>,
errorLabelCssClass: string | string[],
lockForm: boolean,
testingMode: boolean,
validateBeforeSubmitting: boolean,
focusInvalidField?: boolean,
tooltip?: {
position: 'left' | 'top' | 'right' | 'bottom',
},
errorsContainer?: string | Element,
},
dictLocale?: {
key: string;
dict: {
[localeKey: string]: string,
};
}[];
);
Check out all possible settings:
📄️ errorFieldStyle
Custom CSS styles for invalid field.
📄️ errorFieldCssClass
Custom CSS classes for invalid field.
📄️ errorLabelCssClass
Custom CSS class for invalid label.
📄️ errorLabelStyle
Custom CSS styles for invalid label.
📄️ successFieldCssClass
Custom CSS classes for valid field.
📄️ successFieldStyle
Custom CSS styles for valid field.
📄️ successLabelCssClass
Custom CSS class for valid label.
📄️ successLabelStyle
Custom CSS styles for valid label.
📄️ focusInvalidField
If true, the first invalid field will be focused after the form submitting.
📄️ lockForm
If true, lock form during validation. Could be useful for async validation to make it impossible for user to interact with the form.
📄️ tooltip
If the field defined, tooltips will be displayed instead of regular error labels. It has position field which could be 'left' | 'top' | 'right' | 'bottom'.
📄️ errorsContainer
By default, errors rendered next to the invalid field.
📄️ validateBeforeSubmitting
If true, it will trigger validation and show errors for the field before submitting the form.
📄️ submitFormAutomatically
If true, the form will be submitted if the validation is successful.
📄️ testingMode
If true, it will add data-testid attributes for easier testing.