I am not able to figure out how to add custom validation in antd form in react. Validator function will work or not. Please suggest a suitable approach.
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: 'The name is required.',
},
{
pattern: /^[a-zA-Z0-9]+$/,
message: 'Name can only include letters and numbers.',
},
]}
>
<Input />
</Form.Item>
Inside the rules array, you can define a custom validation by defining an async validator function.
<Form>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: 'The name is required.',
},
{
message: 'this is custom',
validator: (_, value) => {
if (/^[a-zA-Z0-9]+$/.test(value)) {
return Promise.resolve();
} else {
return Promise.reject('Some message here');
}
}
}
]}
>
<Input />
</Form.Item>
</Form>
/^[a-zA-Z]{10}$/.test(value) and reject with validation_rule.msg, i'll edit the answerInside the rules array, you can define a custom validation by this way
<Form>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: "The name is required.",
},
({ getFieldValue }) => ({
validator(_, value) {
if (regex.test(value)) {
return Promise.resolve();
} else {
return Promise.reject(new Error("Some message here"));
}
},
}),
]}
>
<Input />
</Form.Item>
</Form>
this by using getFieldValue you can access other field values too. it is really helpfull when your validation is dependant on other filed like password and confirm password.
The custom validator function checks if the input matches the regular expression /^[a-zA-Z0-9]+$/. If the value contains non-alphanumeric characters, it returns a rejected promise with an error message. Otherwise, it resolves the promise, indicating successful validation.
For more information on form validation in Ant Design https://ant.design/components/form#formerrorlist
<Form>
<Form.Item
label="Name"
name="name"
rules={[
{
required: true,
message: "The name is required.",
},
{
validator: (_, value) => {
if (!/^[a-zA-Z0-9]+$/.test(value)) {
return Promise.reject(new Error('Name can only include letters and numbers.'));
}
return Promise.resolve();
},
},
]}
>
<Input />
</Form.Item>
</Form>
validatorproperty from the Rule API.