Need to show an error message after validating a string entered in the textbox

[harshithkn]

When a user enters a value into the search field I want to validate the string and if the entered string is invalid want to show an error/message or warning to the user.

For example if the user is expected to enter an id of length 10, then the search field should take exactly ten characters and anything less than that should prompt the user to enter a valid id.

Can somebody please let me know how I can use validateValue and showErrorMessage to achieve this??
Or is there any other way to do this??

[ukrbublik]

Yes, it's achieveble with validateValue and showErrorMessage.
See example app:

react-awesome-query-builder/packages/examples/demo/config.tsx

Lines 299 to 301 in 1d04f4f

	validateValue: (val: string, fieldSettings) => {
	return (val.length < 10 && (val === "" || val.match(/^[A-Za-z0-9_-]+$/) !== null));
	},

If you return string instead of false, it will be shown as error message.

Currently for MUI it's not possible to present error as in your screenshot. Error will be shown in separate div, not inside MUI inpur. It's on Todo list, but low priority.

[harshithkn]

Got it, Thank you!!!