From 7032a19e50c97b73a7db6c8679faf3d7a4a61749 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Mon, 29 Jul 2024 12:09:14 +0530 Subject: [PATCH 1/3] Issue #PS-1499: add custom validation for name and email field --- public/locales/en/common.json | 6 ++++-- src/components/DynamicForm.tsx | 28 +++++++++++++++++++--------- src/components/UserTable.tsx | 2 +- 3 files changed, 24 insertions(+), 12 deletions(-) diff --git a/public/locales/en/common.json b/public/locales/en/common.json index 8de45f5c..2f32cd09 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -192,8 +192,10 @@ "MAX_LENGTH_DIGITS_ERROR": "Maximum {{maxLength}} Digits allowed", "MIN_LENGTH_CHARACTERS_ERROR": "Minimum {{minLength}} characters required", "MAX_LENGTH_CHARACTERS_ERROR": "Maximum {{maxLength}} characters allowed", - "NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED": "Numbers and special characters are not allowed" - }, + "NUMBER_AND_SPECIAL_CHARACTERS_NOT_ALLOWED": "Numbers and special characters are not allowed", + "NAME_CANNOT_INCLUDE_DIGITS":"Name can not include digits", + "INVALID_EMAIL_FORMAT":"Invalid email format" +}, "TABLE_TITLE": { "NAME": "Name", "STATUS": "Status", diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index 07cc7303..db06b3cc 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -28,6 +28,7 @@ interface DynamicFormProps { }; children?: ReactNode; } + const DynamicForm: React.FC = ({ schema, uiSchema, @@ -44,11 +45,8 @@ const DynamicForm: React.FC = ({ }; const { t } = useTranslation(); - // console.log('CustomErrorList', CustomErrorList); - const handleError = (errors: any) => { if (errors.length > 0) { - // Adjust the selector based on the actual structure of the form element names const property = errors[0].property?.replace(/^root\./, ''); const errorField = document.querySelector( `[name$="${property}"]` @@ -57,7 +55,6 @@ const DynamicForm: React.FC = ({ if (errorField) { errorField.focus(); } else { - // If the name-based selector fails, try to select by ID as a fallback const fallbackField = document.getElementById(property) as HTMLElement; if (fallbackField) { fallbackField.focus(); @@ -73,16 +70,11 @@ const DynamicForm: React.FC = ({ return errors.map((error: any) => { switch (error.name) { case 'required': { - // error.message = t('FORM_ERROR_MESSAGES.FIELD_REQUIRED', { - // field: t(`FORM.${schema.properties[error.property].title}`), - // }); - error.message = t('FORM_ERROR_MESSAGES.THIS_IS_REQUIRED_FIELD'); break; } case 'pattern': { const property = error.property.substring(1); - console.log('schema===>', schema); if (schema.properties?.[property]?.validation?.includes('numeric')) { error.message = t('FORM_ERROR_MESSAGES.ENTER_ONLY_DIGITS'); } else if ( @@ -125,6 +117,23 @@ const DynamicForm: React.FC = ({ onChange(event); } + const customValidate = (formData: any, errors: any) => { + if (formData.name && /\d/.test(formData.name)) { + errors.name.addError(t('FORM_ERROR_MESSAGES.NAME_CANNOT_INCLUDE_DIGITS')); + } + + if (formData.father_name && /\d/.test(formData.father_name)) { + errors.father_name.addError(t('FORM_ERROR_MESSAGES.NAME_CANNOT_INCLUDE_DIGITS')); + } + + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + if (formData.email && !emailPattern.test(formData.email)) { + errors.email.addError(t('FORM_ERROR_MESSAGES.INVALID_EMAIL_FORMAT')); + } + + return errors; + }; + return (
= ({ onError={handleError} transformErrors={transformErrors} fields={customFields} + customValidate={customValidate} // Add customValidate function here > {children} diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index 71c079fc..87843bd4 100644 --- a/src/components/UserTable.tsx +++ b/src/components/UserTable.tsx @@ -393,7 +393,7 @@ const UserTable: React.FC = ({ role , userType, searchPlaceholde name: user.name.charAt(0).toUpperCase() + user.name.slice(1).toLowerCase(), role: user.role, gender:user.gender, - mobile: user.mobile==="NAN"?"":user.mobile, + mobile: user.mobile==="NaN"?"":user.mobile, age: ageField ? ageField.value : null, district: districtField ? districtField.value : null, state: stateField ? stateField.value : null, From 53677095deb87d54708625deb1aa6dc093825282 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Mon, 29 Jul 2024 12:13:10 +0530 Subject: [PATCH 2/3] update pr --- src/components/DynamicForm.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index db06b3cc..a9dc9025 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -126,7 +126,7 @@ const DynamicForm: React.FC = ({ errors.father_name.addError(t('FORM_ERROR_MESSAGES.NAME_CANNOT_INCLUDE_DIGITS')); } - const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; if (formData.email && !emailPattern.test(formData.email)) { errors.email.addError(t('FORM_ERROR_MESSAGES.INVALID_EMAIL_FORMAT')); } From d319c9887491efa5c42e246ba53ddbd0110bd8b2 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Mon, 29 Jul 2024 12:20:57 +0530 Subject: [PATCH 3/3] remove custom validation --- src/components/DynamicForm.tsx | 20 ++------------------ 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index a9dc9025..0117402a 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -117,23 +117,7 @@ const DynamicForm: React.FC = ({ onChange(event); } - const customValidate = (formData: any, errors: any) => { - if (formData.name && /\d/.test(formData.name)) { - errors.name.addError(t('FORM_ERROR_MESSAGES.NAME_CANNOT_INCLUDE_DIGITS')); - } - - if (formData.father_name && /\d/.test(formData.father_name)) { - errors.father_name.addError(t('FORM_ERROR_MESSAGES.NAME_CANNOT_INCLUDE_DIGITS')); - } - - const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/; - if (formData.email && !emailPattern.test(formData.email)) { - errors.email.addError(t('FORM_ERROR_MESSAGES.INVALID_EMAIL_FORMAT')); - } - - return errors; - }; - + return (
= ({ onError={handleError} transformErrors={transformErrors} fields={customFields} - customValidate={customValidate} // Add customValidate function here + > {children}