diff --git a/src/components/Contribute/AuthorInformation.tsx b/src/components/Contribute/AuthorInformation.tsx index 05866853..fe7dddfd 100644 --- a/src/components/Contribute/AuthorInformation.tsx +++ b/src/components/Contribute/AuthorInformation.tsx @@ -26,11 +26,14 @@ interface Props { const AuthorInformation: React.FC = ({ formType, reset, formData, setDisableAction, email, setEmail, name, setName }) => { const [validEmail, setValidEmail] = useState(); const [validName, setValidName] = useState(); + const [validEmailError, setValidEmailError] = useState('Required Field'); - const validateEmail = (email: string) => { + const validateEmail = (emailStr: string) => { + const email = emailStr.trim(); const re = /\S+@\S+\.\S+/; if (re.test(email)) { setValidEmail(ValidatedOptions.success); + setValidEmailError(''); if (formType === FormType.Knowledge) { setDisableAction(!checkKnowledgeFormCompletion(formData)); return; @@ -38,12 +41,15 @@ const AuthorInformation: React.FC = ({ formType, reset, formData, setDisa setDisableAction(!checkSkillFormCompletion(formData)); return; } + const errMsg = email ? 'Please enter a valid email address.' : 'Required field'; setDisableAction(true); setValidEmail(ValidatedOptions.error); + setValidEmailError(errMsg); return; }; - const validateName = (name: string) => { + const validateName = (nameStr: string) => { + const name = nameStr.trim(); if (name.length > 0) { setValidName(ValidatedOptions.success); if (formType === FormType.Knowledge) { @@ -81,7 +87,7 @@ const AuthorInformation: React.FC = ({ formType, reset, formData, setDisa /> } > - + = ({ formType, reset, formData, setDisa } variant={validEmail}> - Please enter a valid email address. + {validEmailError} )} + + = ({ formType, reset, formData, setDisa } variant={validName}> - Name is required. + Required field diff --git a/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx b/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx index 0e37bf9f..6624cb74 100644 --- a/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx +++ b/src/components/Contribute/Knowledge/AttributionInformation/AttributionInformation.tsx @@ -66,7 +66,8 @@ const AttributionInformation: React.FC = ({ setValidCreators(ValidatedOptions.success); }, [isEditForm]); - const validateTitle = (title: string) => { + const validateTitle = (titleStr: string) => { + const title = titleStr.trim(); if (title.length > 0) { setValidTitle(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -77,7 +78,8 @@ const AttributionInformation: React.FC = ({ return; }; - const validateLink = (link: string) => { + const validateLink = (linkStr: string) => { + const link = linkStr.trim(); if (link.length === 0) { setDisableAction(true); setValidLink(ValidatedOptions.error); @@ -95,7 +97,8 @@ const AttributionInformation: React.FC = ({ } }; - const validateRevision = (revision: string) => { + const validateRevision = (revisionStr: string) => { + const revision = revisionStr.trim(); if (revision.length > 0) { setValidRevision(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -106,7 +109,8 @@ const AttributionInformation: React.FC = ({ return; }; - const validateLicense = (license: string) => { + const validateLicense = (licenseStr: string) => { + const license = licenseStr.trim(); if (license.length > 0) { setValidLicense(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -117,7 +121,8 @@ const AttributionInformation: React.FC = ({ return; }; - const validateCreators = (creators: string) => { + const validateCreators = (creatorsStr: string) => { + const creators = creatorsStr.trim(); if (creators.length > 0) { setValidCreators(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -145,7 +150,7 @@ const AttributionInformation: React.FC = ({ /> } > - + = ({ } variant={validLink}> - Link to title is required. + Required field @@ -174,6 +179,8 @@ const AttributionInformation: React.FC = ({ )} + + = ({ } variant={validTitle}> - Title is required. + Required field )} + + = ({ } variant={validRevision}> - Revision is required. + Required field )} + + = ({ } variant={validLicense}> - License is required. + Required field )} + + = ({ } variant={validCreators}> - Creators is required. + Required field diff --git a/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx b/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx index 50686478..7f2e4c2e 100644 --- a/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx +++ b/src/components/Contribute/Knowledge/DocumentInformation/DocumentInformation.tsx @@ -67,7 +67,8 @@ const DocumentInformation: React.FC = ({ } }, [isEditForm]); - const validateRepo = (repo: string) => { + const validateRepo = (repoStr: string) => { + const repo = repoStr.trim(); if (repo.length === 0) { setDisableAction(true); setValidRepo(ValidatedOptions.error); @@ -85,7 +86,8 @@ const DocumentInformation: React.FC = ({ } }; - const validateCommit = (commit: string) => { + const validateCommit = (commitStr: string) => { + const commit = commitStr.trim(); if (commit.length > 0) { setValidCommit(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -96,7 +98,8 @@ const DocumentInformation: React.FC = ({ return; }; - const validateDocumentName = (documentName: string) => { + const validateDocumentName = (document: string) => { + const documentName = document.trim(); if (documentName.length > 0) { setValidDocumentName(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -257,75 +260,80 @@ const DocumentInformation: React.FC = ({

{modalText}

{!useFileUpload ? ( - - setKnowledgeDocumentRepositoryUrl(value)} - onBlur={() => validateRepo(knowledgeDocumentRepositoryUrl)} - /> - {validRepo === ValidatedOptions.error && ( - - - } variant={validRepo}> - Repo URL is required. - - - - )} - {validRepo === ValidatedOptions.warning && ( - - - } variant="error"> - Please enter a valid URL. - - - - )} - - setKnowledgeDocumentCommit(value)} - onBlur={() => validateCommit(knowledgeDocumentCommit)} - /> - {validCommit === ValidatedOptions.error && ( - - - } variant={validCommit}> - Valid commit SHA is required. - - - - )} - setDocumentName(value)} - onBlur={() => validateDocumentName(documentName)} - /> - {validDocumentName === ValidatedOptions.error && ( - - - } variant={validDocumentName}> - Document name is required. - - - - )} - + <> + + setKnowledgeDocumentRepositoryUrl(value)} + onBlur={() => validateRepo(knowledgeDocumentRepositoryUrl)} + /> + {validRepo === ValidatedOptions.error && ( + + + } variant={validRepo}> + Required field + + + + )} + {validRepo === ValidatedOptions.warning && ( + + + } variant="error"> + Please enter a valid URL. + + + + )} + + + setKnowledgeDocumentCommit(value)} + onBlur={() => validateCommit(knowledgeDocumentCommit)} + /> + {validCommit === ValidatedOptions.error && ( + + + } variant={validCommit}> + Valid commit SHA is required. + + + + )} + + + setDocumentName(value)} + onBlur={() => validateDocumentName(documentName)} + /> + {validDocumentName === ValidatedOptions.error && ( + + + } variant={validDocumentName}> + Required field + + + + )} + + ) : ( <> diff --git a/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx b/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx index b86e669b..5f9b793b 100644 --- a/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx +++ b/src/components/Contribute/Knowledge/KnowledgeInformation/KnowledgeInformation.tsx @@ -52,8 +52,9 @@ const KnowledgeInformation: React.FC = ({ } }, [isEditForm]); - const validateDescription = (description: string) => { - if (description.length > 0 && description.length < 60) { + const validateDescription = (desc: string) => { + const description = desc.trim(); + if (description.length > 0 && description.length <= 60) { setValidDescription(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); return; @@ -63,7 +64,8 @@ const KnowledgeInformation: React.FC = ({ return; }; - const validateDomain = (domain: string) => { + const validateDomain = (dom: string) => { + const domain = dom.trim(); if (domain.length > 0) { setValidDomain(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); @@ -74,8 +76,9 @@ const KnowledgeInformation: React.FC = ({ return; }; - const validateOutline = (outline: string) => { - if (outline.length > 40) { + const validateOutline = (ol: string) => { + const outline = ol.trim(); + if (outline.length >= 40) { setValidOutline(ValidatedOptions.success); setDisableAction(!checkKnowledgeFormCompletion(knowledgeFormData)); return; @@ -103,7 +106,7 @@ const KnowledgeInformation: React.FC = ({ /> } > - + = ({ {validDescription === ValidatedOptions.error && ( } variant={validDescription}> - Description is required and must be less than 60 characters + Required field and must be less than 60 characters. {60 - submissionSummary.trim().length} characters remaining )} - + + = ({ {validDomain === ValidatedOptions.error && ( } variant={validDomain}> - Domain is required + Required field )} - + +