diff --git a/src/components/FileUpload/__snapshots__/index.test.jsx.snap b/src/components/FileUpload/__snapshots__/index.test.jsx.snap
index 7f519bbc..9790302f 100644
--- a/src/components/FileUpload/__snapshots__/index.test.jsx.snap
+++ b/src/components/FileUpload/__snapshots__/index.test.jsx.snap
@@ -4,6 +4,7 @@ exports[`<FileUpload /> render default 1`] = `
 <div>
   <h3>
     File upload
+     
   </h3>
   <b>
     Uploaded files
@@ -57,20 +58,23 @@ exports[`<FileUpload /> render default 1`] = `
       ]
     }
   />
-  <Dropzone
-    accept={
-      {
-        "*": [
-          ".pdf",
-          ".jpg",
-        ],
+  <Form.Group
+    isInValid={true}
+  >
+    <Dropzone
+      accept={
+        {
+          "*": [
+            ".pdf",
+            ".jpg",
+          ],
+        }
       }
-    }
-    maxSize={123456}
-    multiple={true}
-    onProcessUpload={[MockFunction onProcessUpload]}
-    progressVariant="bar"
-  />
+      maxSize={123456}
+      onProcessUpload={[MockFunction onProcessUpload]}
+      progressVariant="bar"
+    />
+  </Form.Group>
 </div>
 `;
 
@@ -82,6 +86,7 @@ exports[`<FileUpload /> render extra columns when activeStepName is submission 1
 <div>
   <h3>
     File upload
+     
   </h3>
   <b>
     Uploaded files
@@ -140,20 +145,23 @@ exports[`<FileUpload /> render extra columns when activeStepName is submission 1
       ]
     }
   />
-  <Dropzone
-    accept={
-      {
-        "*": [
-          ".pdf",
-          ".jpg",
-        ],
+  <Form.Group
+    isInValid={true}
+  >
+    <Dropzone
+      accept={
+        {
+          "*": [
+            ".pdf",
+            ".jpg",
+          ],
+        }
       }
-    }
-    maxSize={123456}
-    multiple={true}
-    onProcessUpload={[MockFunction onProcessUpload]}
-    progressVariant="bar"
-  />
+      maxSize={123456}
+      onProcessUpload={[MockFunction onProcessUpload]}
+      progressVariant="bar"
+    />
+  </Form.Group>
 </div>
 `;
 
@@ -161,6 +169,7 @@ exports[`<FileUpload /> render without dropzone and confirm modal when isReadOnl
 <div>
   <h3>
     File upload
+     
   </h3>
   <FilePreview
     defaultCollapsePreview={false}
@@ -224,6 +233,7 @@ exports[`<FileUpload /> render without file preview if uploadedFiles are empty a
 <div>
   <h3>
     File upload
+     
   </h3>
   <b>
     Uploaded files
@@ -312,20 +322,23 @@ exports[`<FileUpload /> render without header 1`] = `
       ]
     }
   />
-  <Dropzone
-    accept={
-      {
-        "*": [
-          ".pdf",
-          ".jpg",
-        ],
+  <Form.Group
+    isInValid={true}
+  >
+    <Dropzone
+      accept={
+        {
+          "*": [
+            ".pdf",
+            ".jpg",
+          ],
+        }
       }
-    }
-    maxSize={123456}
-    multiple={true}
-    onProcessUpload={[MockFunction onProcessUpload]}
-    progressVariant="bar"
-  />
+      maxSize={123456}
+      onProcessUpload={[MockFunction onProcessUpload]}
+      progressVariant="bar"
+    />
+  </Form.Group>
 </div>
 `;
 
diff --git a/src/components/FileUpload/index.jsx b/src/components/FileUpload/index.jsx
index b7d04bbc..813eb6d2 100644
--- a/src/components/FileUpload/index.jsx
+++ b/src/components/FileUpload/index.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import filesize from 'filesize';
 
-import { DataTable, Dropzone } from '@openedx/paragon';
+import { DataTable, Dropzone, Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { nullMethod } from 'utils';
@@ -35,6 +35,7 @@ const FileUpload = ({
   onDeletedFile,
   defaultCollapsePreview,
   hideHeader,
+  isInValid,
 }) => {
   const { formatMessage } = useIntl();
   const {
@@ -47,7 +48,7 @@ const FileUpload = ({
   const viewStep = useViewStep();
   const activeStepName = useActiveStepName();
   const {
-    enabled, fileUploadLimit, allowedExtensions, maxFileSize,
+    enabled, fileUploadLimit, allowedExtensions, maxFileSize, required,
   } = useFileUploadConfig() || {};
 
   if (!enabled || viewStep === stepNames.studentTraining) {
@@ -78,7 +79,7 @@ const FileUpload = ({
 
   return (
     <div>
-      {!hideHeader && <h3>{formatMessage(messages.fileUploadTitle)}</h3>}
+      {!hideHeader && <h3>{formatMessage(messages.fileUploadTitle)} {required && <span>(required)</span>}</h3>}
       {uploadedFiles.length > 0 && isReadOnly && (
         <FilePreview defaultCollapsePreview={defaultCollapsePreview} />
       )}
@@ -93,15 +94,17 @@ const FileUpload = ({
         columns={columns}
       />
       {!isReadOnly && fileUploadLimit > uploadedFiles.length && (
-        <Dropzone
-          multiple
-          onProcessUpload={onProcessUpload}
-          progressVariant="bar"
-          accept={{
-            '*': (allowedExtensions || []).map((ext) => `.${ext}`),
-          }}
-          maxSize={maxFileSize}
-        />
+        <Form.Group isInValid>
+          <Dropzone
+            onProcessUpload={onProcessUpload}
+            progressVariant="bar"
+            accept={{
+              '*': (allowedExtensions || []).map((ext) => `.${ext}`),
+            }}
+            maxSize={maxFileSize}
+          />
+          {isInValid && <Form.Control.Feedback type="invalid">{formatMessage(messages.required)}</Form.Control.Feedback>}
+        </Form.Group>
       )}
       {!isReadOnly && isModalOpen && (
         <UploadConfirmModal
@@ -122,6 +125,7 @@ FileUpload.defaultProps = {
   onDeletedFile: nullMethod,
   defaultCollapsePreview: false,
   hideHeader: false,
+  isInValid: false,
 };
 FileUpload.propTypes = {
   isReadOnly: PropTypes.bool,
@@ -137,6 +141,7 @@ FileUpload.propTypes = {
   onDeletedFile: PropTypes.func,
   defaultCollapsePreview: PropTypes.bool,
   hideHeader: PropTypes.bool,
+  isInValid: PropTypes.bool,
 };
 
 export default FileUpload;
diff --git a/src/components/FileUpload/messages.js b/src/components/FileUpload/messages.js
index ebf568e8..164781f3 100644
--- a/src/components/FileUpload/messages.js
+++ b/src/components/FileUpload/messages.js
@@ -96,6 +96,11 @@ const messages = defineMessages({
     defaultMessage: 'File description',
     description: 'Popover title for file description',
   },
+  required: {
+    id: 'frontend-app-ora.FileUpload.required',
+    defaultMessage: 'File Upload is required',
+    description: 'Indicating file upload is required',
+  },
 });
 
 export default messages;
diff --git a/src/data/services/lms/types/blockInfo.ts b/src/data/services/lms/types/blockInfo.ts
index 3c511aa7..9315809a 100644
--- a/src/data/services/lms/types/blockInfo.ts
+++ b/src/data/services/lms/types/blockInfo.ts
@@ -17,6 +17,7 @@ export interface TextResponseConfig {
   optional: boolean,
   editorType: 'text' | 'tinymce',
   allowLatexPreview: boolean,
+  required: boolean,
 }
 
 export interface FileResponseConfig {
@@ -27,6 +28,7 @@ export interface FileResponseConfig {
   allowedExtensions: string[],
   blockedExtensions: string[],
   fileTypeDescription: string,
+  required: boolean,
 }
 
 export interface SubmissionConfig {
diff --git a/src/hooks/actions/useConfirmAction.js b/src/hooks/actions/useConfirmAction.js
index a4ebe195..bf127483 100644
--- a/src/hooks/actions/useConfirmAction.js
+++ b/src/hooks/actions/useConfirmAction.js
@@ -13,10 +13,14 @@ export const assessmentSteps = [
   stepNames.peer,
 ];
 
-const useConfirmAction = () => {
+const useConfirmAction = (validateBeforeOpen = () => true) => {
   const [isOpen, setIsOpen] = useKeyedState(stateKeys.isOpen, false);
   const close = React.useCallback(() => setIsOpen(false), [setIsOpen]);
-  const open = React.useCallback(() => setIsOpen(true), [setIsOpen]);
+  const open = React.useCallback(() => {
+    if (validateBeforeOpen()) {
+      setIsOpen(true);
+    }
+  }, [setIsOpen, validateBeforeOpen]);
   return React.useCallback((config) => {
     const { description, title } = config;
     const action = config.action.action ? config.action.action : config.action;
diff --git a/src/hooks/actions/useConfirmAction.test.js b/src/hooks/actions/useConfirmAction.test.js
index cca76dd2..e2bacbbd 100644
--- a/src/hooks/actions/useConfirmAction.test.js
+++ b/src/hooks/actions/useConfirmAction.test.js
@@ -23,12 +23,14 @@ const nestedActionConfig = {
   action: { action: config.action },
 };
 
+const validateBeforeOpen = jest.fn(() => true);
+
 let out;
 describe('useConfirmAction', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     state.mock();
-    out = useConfirmAction();
+    out = useConfirmAction(validateBeforeOpen);
   });
   afterEach(() => { state.resetVals(); });
   describe('behavior', () => {
@@ -44,7 +46,7 @@ describe('useConfirmAction', () => {
       state.expectSetStateCalledWith(stateKeys.isOpen, false);
     };
     const testOpen = (openFn) => {
-      expect(openFn.useCallback.prereqs).toEqual([state.setState[stateKeys.isOpen]]);
+      expect(openFn.useCallback.prereqs).toEqual([state.setState[stateKeys.isOpen], validateBeforeOpen]);
       openFn.useCallback.cb();
       state.expectSetStateCalledWith(stateKeys.isOpen, true);
     };
@@ -62,13 +64,13 @@ describe('useConfirmAction', () => {
         expect(out.useCallback.prereqs[1]).toEqual(true);
       });
       test('open callback', () => {
-        out = useConfirmAction();
+        out = useConfirmAction(validateBeforeOpen);
         testOpen(prereqs[2]);
       });
     });
     describe('callback', () => {
       it('returns action with labels from config action', () => {
-        out = useConfirmAction().useCallback.cb(config);
+        out = useConfirmAction(validateBeforeOpen).useCallback.cb(config);
         testOpen(out.action.onClick);
         expect(out.action.children).toEqual(config.action.labels.default);
         expect(out.confirmProps.isOpen).toEqual(false);
@@ -78,7 +80,7 @@ describe('useConfirmAction', () => {
         testClose(out.confirmProps.close);
       });
       it('returns nested action from config action', () => {
-        out = useConfirmAction().useCallback.cb(nestedActionConfig);
+        out = useConfirmAction(validateBeforeOpen).useCallback.cb(nestedActionConfig);
         testOpen(out.action.onClick);
         expect(out.action.children).toEqual(nestedActionConfig.action.action.labels.default);
         expect(out.confirmProps.isOpen).toEqual(false);
@@ -89,7 +91,7 @@ describe('useConfirmAction', () => {
       });
       it('returns action with children from config action', () => {
         state.mockVals({ [stateKeys.isOpen]: true });
-        out = useConfirmAction().useCallback.cb(noLabelConfig);
+        out = useConfirmAction(validateBeforeOpen).useCallback.cb(noLabelConfig);
         testOpen(out.action.onClick);
         expect(out.action.children).toEqual(noLabelConfig.action.children);
         expect(out.confirmProps.isOpen).toEqual(true);
diff --git a/src/hooks/actions/useSubmitResponseAction.js b/src/hooks/actions/useSubmitResponseAction.js
index 47fdcd57..1f26536c 100644
--- a/src/hooks/actions/useSubmitResponseAction.js
+++ b/src/hooks/actions/useSubmitResponseAction.js
@@ -13,8 +13,8 @@ import messages, { confirmDescriptions, confirmTitles } from './messages';
  */
 const useSubmitResponseAction = ({ options }) => {
   const { formatMessage } = useIntl();
-  const { submit, submitStatus } = options;
-  const confirmAction = useConfirmAction();
+  const { submit, submitStatus, validateBeforeConfirmation } = options;
+  const confirmAction = useConfirmAction(validateBeforeConfirmation);
   return confirmAction({
     action: {
       onClick: submit,
diff --git a/src/hooks/actions/useSubmitResponseAction.test.js b/src/hooks/actions/useSubmitResponseAction.test.js
index 961b8b85..c4b11496 100644
--- a/src/hooks/actions/useSubmitResponseAction.test.js
+++ b/src/hooks/actions/useSubmitResponseAction.test.js
@@ -12,14 +12,15 @@ jest.mock('./useConfirmAction', () => ({
   default: jest.fn(),
 }));
 
-const mockConfirmAction = jest.fn(args => ({ confirmAction: args }));
-when(useConfirmAction).calledWith().mockReturnValue(mockConfirmAction);
-
 const options = {
   submit: jest.fn(),
   submitStatus: 'test-submit-status',
+  validateBeforeConfirmation: jest.fn(),
 };
 
+const mockConfirmAction = jest.fn(args => ({ confirmAction: args }));
+when(useConfirmAction).calledWith(options.validateBeforeConfirmation).mockReturnValue(mockConfirmAction);
+
 let out;
 describe('useSubmitResponseAction', () => {
   beforeEach(() => {
@@ -28,7 +29,7 @@ describe('useSubmitResponseAction', () => {
   describe('behavior', () => {
     it('loads internatioonalization and confirm action from hooks', () => {
       expect(useIntl).toHaveBeenCalledWith();
-      expect(useConfirmAction).toHaveBeenCalledWith();
+      expect(useConfirmAction).toHaveBeenCalledWith(options.validateBeforeConfirmation);
     });
   });
   describe('output confirmAction', () => {
diff --git a/src/views/SubmissionView/SubmissionPrompts.jsx b/src/views/SubmissionView/SubmissionPrompts.jsx
index f2986e21..05bc1ae8 100644
--- a/src/views/SubmissionView/SubmissionPrompts.jsx
+++ b/src/views/SubmissionView/SubmissionPrompts.jsx
@@ -11,11 +11,12 @@ const SubmissionPrompts = ({
   textResponses,
   onUpdateTextResponse,
   isReadOnly,
+  promptStatuses,
 }) => {
   const submissionConfig = useSubmissionConfig();
   const prompts = usePrompts();
 
-  const response = (index) => {
+  const response = (index, isInValid) => {
     if (!submissionConfig.textResponseConfig.enabled) {
       return null;
     }
@@ -25,6 +26,7 @@ const SubmissionPrompts = ({
       <TextResponseEditor
         value={textResponses[index]}
         onChange={onUpdateTextResponse(index)}
+        isInValid={isInValid}
       />
     );
   };
@@ -35,7 +37,7 @@ const SubmissionPrompts = ({
         // eslint-disable-next-line react/no-array-index-key
         <div key={index}>
           <Prompt prompt={prompt} />
-          {response(index)}
+          {response(index, !promptStatuses[index])}
         </div>
       ))}
     </>
@@ -43,11 +45,13 @@ const SubmissionPrompts = ({
 };
 SubmissionPrompts.defaultProps = {
   textResponses: null,
+  promptStatuses: {},
 };
 SubmissionPrompts.propTypes = {
   textResponses: PropTypes.arrayOf(PropTypes.string),
   onUpdateTextResponse: PropTypes.func.isRequired,
   isReadOnly: PropTypes.bool.isRequired,
+  promptStatuses: PropTypes.objectOf(PropTypes.number),
 };
 
 export default SubmissionPrompts;
diff --git a/src/views/SubmissionView/TextResponseEditor/RichTextEditor.jsx b/src/views/SubmissionView/TextResponseEditor/RichTextEditor.jsx
index 2ad9c23d..42b4f91d 100644
--- a/src/views/SubmissionView/TextResponseEditor/RichTextEditor.jsx
+++ b/src/views/SubmissionView/TextResponseEditor/RichTextEditor.jsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Form } from '@openedx/paragon';
 
 import { Editor } from '@tinymce/tinymce-react';
 import 'tinymce/tinymce.min';
@@ -19,6 +20,7 @@ const RichTextEditor = ({
   disabled,
   optional,
   onChange,
+  isInValid,
 }) => {
   const { formatMessage } = useIntl();
 
@@ -56,6 +58,7 @@ const RichTextEditor = ({
         onEditorChange={onChange}
         disabled={disabled}
       />
+      { isInValid && <Form.Control.Feedback type="invalid">{formatMessage(messages.requiredField)}</Form.Control.Feedback>}
     </div>
   );
 };
@@ -65,6 +68,7 @@ RichTextEditor.defaultProps = {
   value: '',
   optional: false,
   onChange: () => { },
+  isInValid: false,
 };
 
 RichTextEditor.propTypes = {
@@ -83,6 +87,7 @@ RichTextEditor.propTypes = {
   value: PropTypes.string,
   optional: PropTypes.bool,
   onChange: PropTypes.func,
+  isInValid: PropTypes.bool,
 };
 
 export default RichTextEditor;
diff --git a/src/views/SubmissionView/TextResponseEditor/TextEditor.jsx b/src/views/SubmissionView/TextResponseEditor/TextEditor.jsx
index 703d1545..ed682098 100644
--- a/src/views/SubmissionView/TextResponseEditor/TextEditor.jsx
+++ b/src/views/SubmissionView/TextResponseEditor/TextEditor.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { TextArea } from '@openedx/paragon';
+import { Form } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 import './TextEditor.scss';
@@ -12,23 +12,28 @@ const TextEditor = ({
   disabled,
   optional,
   onChange,
+  isInValid,
 }) => {
   const { formatMessage } = useIntl();
 
   return (
-    <TextArea
-      name="text-response"
-      className="textarea-response"
-      label={(
-        <h3>
-          {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
-        </h3>
-      )}
-      value={value}
-      onChange={onChange}
-      placeholder={formatMessage(messages.textResponsePlaceholder)}
-      disabled={disabled}
-    />
+    <Form.Group isInvalid={isInValid}>
+      <Form.Control
+        as="textarea"
+        name="text-response"
+        className="textarea-response"
+        label={(
+          <h3>
+            {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
+          </h3>
+        )}
+        value={value}
+        onChange={onChange}
+        placeholder={formatMessage(messages.textResponsePlaceholder)}
+        disabled={disabled}
+      />
+      { isInValid && <Form.Control.Feedback type="invalid">{formatMessage(messages.requiredField)}</Form.Control.Feedback>}
+    </Form.Group>
   );
 };
 
@@ -37,6 +42,7 @@ TextEditor.defaultProps = {
   value: '',
   optional: false,
   onChange: () => {},
+  isInValid: false,
 };
 
 TextEditor.propTypes = {
@@ -55,6 +61,7 @@ TextEditor.propTypes = {
   value: PropTypes.string,
   optional: PropTypes.bool,
   onChange: PropTypes.func,
+  isInValid: PropTypes.bool,
 };
 
 export default TextEditor;
diff --git a/src/views/SubmissionView/TextResponseEditor/TextEditor.scss b/src/views/SubmissionView/TextResponseEditor/TextEditor.scss
index 9835aac3..36b497ee 100644
--- a/src/views/SubmissionView/TextResponseEditor/TextEditor.scss
+++ b/src/views/SubmissionView/TextResponseEditor/TextEditor.scss
@@ -1,3 +1,5 @@
-.form-control.textarea-response {
-  height: 500px;
+.textarea-response {
+  .form-control {
+    height: 500px;
+  }
 }
diff --git a/src/views/SubmissionView/TextResponseEditor/TextEditor.test.jsx b/src/views/SubmissionView/TextResponseEditor/TextEditor.test.jsx
index 71cc52d9..6d8fc91e 100644
--- a/src/views/SubmissionView/TextResponseEditor/TextEditor.test.jsx
+++ b/src/views/SubmissionView/TextResponseEditor/TextEditor.test.jsx
@@ -15,7 +15,7 @@ describe('<TextEditor />', () => {
   });
 
   it('render required', () => {
-    const wrapper = shallow(<TextEditor {...props} optional={false} />);
+    const wrapper = shallow(<TextEditor {...props} optional={false} isInValid />);
     expect(wrapper.snapshot).toMatchSnapshot();
   });
 });
diff --git a/src/views/SubmissionView/TextResponseEditor/__snapshots__/TextEditor.test.jsx.snap b/src/views/SubmissionView/TextResponseEditor/__snapshots__/TextEditor.test.jsx.snap
index 2686807f..52dbad22 100644
--- a/src/views/SubmissionView/TextResponseEditor/__snapshots__/TextEditor.test.jsx.snap
+++ b/src/views/SubmissionView/TextResponseEditor/__snapshots__/TextEditor.test.jsx.snap
@@ -1,39 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<TextEditor /> render optional 1`] = `
-<TextArea
-  className="textarea-response"
-  disabled={false}
-  label={
-    <h3>
-      Your response
-       (
-      Optional
-      )
-    </h3>
-  }
-  name="text-response"
-  onChange={[MockFunction onChange]}
-  placeholder="Enter your response to the prompt above"
-  value="value"
-/>
+<Form.Group
+  isInvalid={false}
+>
+  <Form.Control
+    as="textarea"
+    className="textarea-response"
+    disabled={false}
+    label={
+      <h3>
+        Your response
+         (
+        Optional
+        )
+      </h3>
+    }
+    name="text-response"
+    onChange={[MockFunction onChange]}
+    placeholder="Enter your response to the prompt above"
+    value="value"
+  />
+</Form.Group>
 `;
 
 exports[`<TextEditor /> render required 1`] = `
-<TextArea
-  className="textarea-response"
-  disabled={false}
-  label={
-    <h3>
-      Your response
-       (
-      required
-      )
-    </h3>
-  }
-  name="text-response"
-  onChange={[MockFunction onChange]}
-  placeholder="Enter your response to the prompt above"
-  value="value"
-/>
+<Form.Group
+  isInvalid={true}
+>
+  <Form.Control
+    as="textarea"
+    className="textarea-response"
+    disabled={false}
+    label={
+      <h3>
+        Your response
+         (
+        required
+        )
+      </h3>
+    }
+    name="text-response"
+    onChange={[MockFunction onChange]}
+    placeholder="Enter your response to the prompt above"
+    value="value"
+  />
+  <Form.Control.Feedback
+    type="invalid"
+  >
+    This field is required
+  </Form.Control.Feedback>
+</Form.Group>
 `;
diff --git a/src/views/SubmissionView/TextResponseEditor/index.jsx b/src/views/SubmissionView/TextResponseEditor/index.jsx
index 95dac490..f0b7b84b 100644
--- a/src/views/SubmissionView/TextResponseEditor/index.jsx
+++ b/src/views/SubmissionView/TextResponseEditor/index.jsx
@@ -10,7 +10,7 @@ import RichTextEditor from './RichTextEditor';
 import LatexPreview from './LaTexPreview';
 import messages from './messages';
 
-const TextResponseEditor = ({ value, onChange }) => {
+const TextResponseEditor = ({ value, onChange, isInValid }) => {
   const { textResponseConfig } = useSubmissionConfig();
   const {
     optional,
@@ -34,7 +34,11 @@ const TextResponseEditor = ({ value, onChange }) => {
 
   return (
     <div className="mt-2">
-      <EditorComponent {...{ optional, value, onChange }} />
+      <EditorComponent
+        {...{
+          optional, value, onChange, isInValid,
+        }}
+      />
       {
         allowLatexPreview && (
           <div>
@@ -47,9 +51,14 @@ const TextResponseEditor = ({ value, onChange }) => {
   );
 };
 
+TextResponseEditor.defaultProps = {
+  isInValid: false,
+};
+
 TextResponseEditor.propTypes = {
   value: PropTypes.string.isRequired,
   onChange: PropTypes.func.isRequired,
+  isInValid: PropTypes.bool,
 };
 
 export default TextResponseEditor;
diff --git a/src/views/SubmissionView/TextResponseEditor/messages.js b/src/views/SubmissionView/TextResponseEditor/messages.js
index e3752524..f977de72 100644
--- a/src/views/SubmissionView/TextResponseEditor/messages.js
+++ b/src/views/SubmissionView/TextResponseEditor/messages.js
@@ -26,6 +26,11 @@ const messages = defineMessages({
     description: 'Label for the preview LaTeX button',
     id: 'frontend-app-ora.TextResponse.previewLaTexButton',
   },
+  requiredField: {
+    defaultMessage: 'This field is required',
+    description: 'Indicating a field is required',
+    id: 'frontend-app-ora.TextResponse.requiredField',
+  },
 });
 
 export default messages;
diff --git a/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap b/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap
index 248add58..b48cfa58 100644
--- a/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap
+++ b/src/views/SubmissionView/__snapshots__/SubmissionPrompts.test.jsx.snap
@@ -30,6 +30,7 @@ exports[`<SubmissionPrompts /> render text response editor when readOnly is fals
       prompt="prompt1"
     />
     <TextResponseEditor
+      isInValid={true}
       value="response1"
     />
   </div>
@@ -40,6 +41,7 @@ exports[`<SubmissionPrompts /> render text response editor when readOnly is fals
       prompt="prompt2"
     />
     <TextResponseEditor
+      isInValid={true}
       value="response2"
     />
   </div>
diff --git a/src/views/SubmissionView/hooks/useSubmissionValidationStatus.js b/src/views/SubmissionView/hooks/useSubmissionValidationStatus.js
new file mode 100644
index 00000000..9ce9c618
--- /dev/null
+++ b/src/views/SubmissionView/hooks/useSubmissionValidationStatus.js
@@ -0,0 +1,63 @@
+import { useCallback } from 'react';
+import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
+
+import {
+  useSubmissionConfig,
+} from 'hooks/app';
+
+export const stateKeys = StrictDict({
+  promptStatuses: 'promptStatuses',
+  submissionTriggered: 'submissionTriggered',
+  fileUploadIsRequired: 'fileUploadIsRequired',
+});
+
+const useSubmissionStatuses = (textResponses, uploadedFiles) => {
+  const submissionConfig = useSubmissionConfig();
+
+  // holds the status of each text field
+  const [promptStatuses, setPromptStatuses] = useKeyedState(
+    stateKeys.promptStatuses,
+    textResponses.reduce((obj, val, i) => ({ ...obj, [i]: true }), {}),
+  );
+  const [submissionTriggered, setSubmissionTriggered] = useKeyedState(stateKeys.submissionTriggered, false);
+  const [fileUploadIsRequired, setFileUploadIsRequired] = useKeyedState(stateKeys.fileUploadIsRequired, false);
+
+  // this function is to be called when response submit button is clicked
+  const validateBeforeConfirmation = useCallback(() => {
+    setSubmissionTriggered(true);
+    const retrievePromptsSubmissionStatus = textResponses.reduce((obj, val, i) => ({ ...obj, [i]: val }), {});
+    let containsInvalidPrompts = false;
+    if (submissionConfig.textResponseConfig.required) {
+      for (let i = 0; i < textResponses.length; i++) {
+        retrievePromptsSubmissionStatus[i] = !!textResponses[i];
+      }
+      containsInvalidPrompts = Object.values(retrievePromptsSubmissionStatus).some((val) => !val);
+    }
+    const calcFileUploadIsRequired = submissionConfig.fileResponseConfig.required && !uploadedFiles.length;
+    setFileUploadIsRequired(calcFileUploadIsRequired);
+    if (containsInvalidPrompts || (submissionConfig.fileResponseConfig.required && !uploadedFiles.length)) {
+      setPromptStatuses(retrievePromptsSubmissionStatus);
+      return false;
+    }
+
+    return true;
+  }, [
+    textResponses,
+    uploadedFiles,
+    submissionConfig,
+    setPromptStatuses,
+    setSubmissionTriggered,
+    setFileUploadIsRequired,
+  ]);
+
+  return {
+    validateBeforeConfirmation,
+    setSubmissionTriggered,
+    submissionTriggered,
+    setPromptStatuses,
+    promptStatuses,
+    fileUploadIsRequired,
+  };
+};
+
+export default useSubmissionStatuses;
diff --git a/src/views/SubmissionView/hooks/useSubmissionValidationStatus.test.js b/src/views/SubmissionView/hooks/useSubmissionValidationStatus.test.js
new file mode 100644
index 00000000..79a5ef18
--- /dev/null
+++ b/src/views/SubmissionView/hooks/useSubmissionValidationStatus.test.js
@@ -0,0 +1,103 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+
+import { useSubmissionConfig } from 'hooks/app';
+
+import useSubmissionValidationStatus, { stateKeys } from './useSubmissionValidationStatus';
+
+jest.mock('hooks/app', () => ({
+  useResponseData: jest.fn(),
+  useUploadFiles: jest.fn(),
+  useDeleteFile: jest.fn(),
+
+  useSubmissionConfig: jest.fn(),
+  useTextResponses: jest.fn(),
+}));
+
+const state = mockUseKeyedState(stateKeys);
+
+describe('useSubmissionValidationStatus', () => {
+  useSubmissionConfig.mockReturnValue({
+    textResponseConfig: { required: false },
+    fileResponseConfig: { required: false },
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+  });
+  afterEach(() => { state.resetVals(); });
+
+  it('initializes state for useSubmissionValidationStatus', () => {
+    useSubmissionConfig.mockReturnValue();
+    useSubmissionValidationStatus([], []);
+    state.expectInitializedWith(stateKeys.submissionTriggered, false);
+    state.expectInitializedWith(stateKeys.promptStatuses, {});
+    state.expectInitializedWith(stateKeys.fileUploadIsRequired, false);
+  });
+
+  it('validateBeforeConfirmation function returns true if prompts and file uploads are not required', () => {
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { required: false },
+      fileResponseConfig: { required: false },
+    });
+    const { validateBeforeConfirmation } = useSubmissionValidationStatus([''], []);
+    expect(validateBeforeConfirmation.useCallback.cb()).toBe(true);
+    expect(state.setState.submissionTriggered).toHaveBeenCalledWith(true);
+  });
+
+  it('validateBeforeConfirmation function returns false when requirement is not met', () => {
+    useSubmissionConfig.mockReturnValue({
+      textResponseConfig: { required: true },
+      fileResponseConfig: { required: true },
+    });
+    const { validateBeforeConfirmation } = useSubmissionValidationStatus([''], []);
+    validateBeforeConfirmation.useCallback.cb();
+    expect(state.setState.submissionTriggered).toHaveBeenCalledWith(true);
+    expect(validateBeforeConfirmation.useCallback.cb()).toBe(false);
+  });
+
+  it('validateBeforeConfirmation function returns true when required requirement is met', () => {
+    const validationStatusArgs = [['hello', 'hi'], ['blah']];
+    const mockSubmissionConfigValue = {
+      textResponseConfig: { required: true },
+      fileResponseConfig: { required: true },
+    };
+    useSubmissionConfig.mockReturnValue(mockSubmissionConfigValue);
+    const { validateBeforeConfirmation } = useSubmissionValidationStatus(...validationStatusArgs);
+    expect(validateBeforeConfirmation.useCallback.prereqs).toEqual(
+      [
+        ...validationStatusArgs,
+        mockSubmissionConfigValue,
+        state.setState[stateKeys.promptStatuses],
+        state.setState[stateKeys.submissionTriggered],
+        state.setState[stateKeys.fileUploadIsRequired],
+      ],
+    );
+    validateBeforeConfirmation.useCallback.cb();
+    expect(state.setState.submissionTriggered).toHaveBeenCalledWith(true);
+    expect(validateBeforeConfirmation.useCallback.cb()).toBe(true);
+  });
+
+  it('validateBeforeConfirmation function returns false when file upload requirement is not met', () => {
+    const validationStatusArgs = [['hello', 'hi'], []];
+    const mockSubmissionConfigValue = {
+      textResponseConfig: { required: true },
+      fileResponseConfig: { required: true },
+    };
+    useSubmissionConfig.mockReturnValue(mockSubmissionConfigValue);
+    const { validateBeforeConfirmation } = useSubmissionValidationStatus(...validationStatusArgs);
+    expect(validateBeforeConfirmation.useCallback.prereqs).toEqual(
+      [
+        ...validationStatusArgs,
+        mockSubmissionConfigValue,
+        state.setState[stateKeys.promptStatuses],
+        state.setState[stateKeys.submissionTriggered],
+        state.setState[stateKeys.fileUploadIsRequired],
+      ],
+    );
+    validateBeforeConfirmation.useCallback.cb();
+    expect(state.setState.submissionTriggered).toHaveBeenCalledWith(true);
+    expect(validateBeforeConfirmation.useCallback.cb()).toBe(false);
+    expect(state.values.fileUploadIsRequired).toEqual(true);
+  });
+});
diff --git a/src/views/SubmissionView/hooks/useSubmissionViewData.js b/src/views/SubmissionView/hooks/useSubmissionViewData.js
index adea9ddb..50e3ea1a 100644
--- a/src/views/SubmissionView/hooks/useSubmissionViewData.js
+++ b/src/views/SubmissionView/hooks/useSubmissionViewData.js
@@ -16,6 +16,7 @@ import { stepStates, stepNames } from 'constants/index';
 
 import useTextResponsesData from './useTextResponsesData';
 import useUploadedFilesData from './useUploadedFilesData';
+import useSubmissionValidationStatus from './useSubmissionValidationStatus';
 
 const stateKeys = StrictDict({
   hasSavedDraft: 'hasSavedDraft',
@@ -48,6 +49,13 @@ const useSubmissionViewData = () => {
     onDeletedFile,
   } = useUploadedFilesData();
 
+  const {
+    validateBeforeConfirmation,
+    submissionTriggered,
+    promptStatuses,
+    fileUploadIsRequired,
+  } = useSubmissionValidationStatus(textResponses, uploadedFiles);
+
   const submitResponseHandler = React.useCallback(() => {
     submitResponseMutation.mutateAsync({
       textResponses,
@@ -73,6 +81,7 @@ const useSubmissionViewData = () => {
       submit: submitResponseHandler,
       submitStatus: submitResponseMutation.status,
       hasSubmitted,
+      validateBeforeConfirmation,
     },
     response: hasSubmitted
       ? response
@@ -84,6 +93,9 @@ const useSubmissionViewData = () => {
     onFileUploaded,
     showRubric: rubricConfig.showDuringResponse,
     isReadOnly: stepState === stepStates.done || hasSubmitted,
+    promptStatuses,
+    submissionTriggered,
+    fileUploadIsRequired,
   };
 };
 
diff --git a/src/views/SubmissionView/hooks/useTextResponsesData.js b/src/views/SubmissionView/hooks/useTextResponsesData.js
index b28a6778..a1160788 100644
--- a/src/views/SubmissionView/hooks/useTextResponsesData.js
+++ b/src/views/SubmissionView/hooks/useTextResponsesData.js
@@ -45,9 +45,10 @@ const useTextResponsesData = ({ setHasSavedDraft }) => {
   }, [setIsDirty, finishLaterMutation, value]);
 
   const onChange = useCallback((index) => (textResponse) => {
+    const val = typeof textResponse === 'string' ? textResponse : textResponse?.target.value;
     setValue(oldResponses => {
       const out = [...oldResponses];
-      out[index] = textResponse;
+      out[index] = val;
       return out;
     });
     setIsDirty(true);
diff --git a/src/views/SubmissionView/index.jsx b/src/views/SubmissionView/index.jsx
index d0aae85a..810db427 100644
--- a/src/views/SubmissionView/index.jsx
+++ b/src/views/SubmissionView/index.jsx
@@ -30,6 +30,8 @@ const SubmissionView = () => {
     onDeletedFile,
     onFileUploaded,
     isReadOnly,
+    promptStatuses,
+    fileUploadIsRequired,
   } = useSubmissionViewData();
 
   const { formatMessage } = useIntl();
@@ -54,12 +56,20 @@ const SubmissionView = () => {
 
               <StatusAlert hasSubmitted={actionOptions.hasSubmitted} />
               <Instructions />
-              <SubmissionPrompts {...{ textResponses, onUpdateTextResponse, isReadOnly }} />
+              <SubmissionPrompts
+                {...{
+                  textResponses,
+                  onUpdateTextResponse,
+                  isReadOnly,
+                  promptStatuses,
+                }}
+              />
               <FileUpload
                 onDeletedFile={onDeletedFile}
                 onFileUploaded={onFileUploaded}
                 uploadedFiles={uploadedFiles}
                 isReadOnly={isReadOnly}
+                isInValid={fileUploadIsRequired}
               />
             </div>
             <ModalActions options={actionOptions} />