feat(form): add validation to NumericalInput to accept only numeric values

Author: jesusbalderramawgu

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx

@@ -18,7 +18,7 @@ import { FeedbackBox } from './components/Feedback';
 import * as hooks from './hooks';
 import { ProblemTypeKeys } from '../../../../../data/constants/problem';
 import ExpandableTextArea from '../../../../../sharedComponents/ExpandableTextArea';
-import { answerRangeFormatRegex } from '../../../data/OLXParser';
+import { answerRangeFormatRegex, numericRegex } from '../../../data/OLXParser';
 
 const AnswerOption = ({
   answer,
@@ -53,6 +53,10 @@ const AnswerOption = ({
     const cleanedValue = value.replace(/^\s+|\s+$/g, '');
     return !cleanedValue.length || answerRangeFormatRegex.test(cleanedValue);
   };
+  const validateAnswerNumeric = (value) => {
+    const cleanedValue = (value ?? '').trim();
+    return !cleanedValue.length || numericRegex.test(cleanedValue);
+  }
 
   const getInputArea = () => {
     if ([ProblemTypeKeys.SINGLESELECT, ProblemTypeKeys.MULTISELECT].includes(problemType)) {
@@ -70,16 +74,26 @@ const AnswerOption = ({
       );
     }
     if (problemType !== ProblemTypeKeys.NUMERIC || !answer.isAnswerRange) {
+     const isValidValue = validateAnswerNumeric(answer.title)
       return (
-        <Form.Control
-          as="textarea"
-          className="answer-option-textarea text-gray-500 small"
-          autoResize
-          rows={1}
-          value={answer.title}
-          onChange={setAnswerTitle}
-          placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
-        />
+        <Form.Group isInvalid={!isValidValue}>
+          <Form.Control
+            as="textarea"
+            className="answer-option-textarea text-gray-500 small"
+            autoResize
+            rows={1}
+            value={answer.title}
+            onChange={setAnswerTitle}
+            placeholder={intl.formatMessage(messages.answerTextboxPlaceholder)}
+
+          />
+           {!isValidValue && (
+            <Form.Control.Feedback type="invalid">
+              <FormattedMessage {...messages.AnswerNumericErrorText} />
+            </Form.Control.Feedback>
+            )}
+        
+        </Form.Group>
       );
     }
     // Return Answer Range View

src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/messages.js

@@ -82,6 +82,11 @@ const messages = defineMessages({
     defaultMessage: 'Error: Invalid range format. Use brackets or parentheses with values separated by a comma.',
     description: 'Error text describing wrong format of answer ranges',
   },
+  AnswerNumericErrorText: {
+    id: 'authoring.answerwidget.answer.answerNumericErrorText',
+    defaultMessage: 'Error: This problem type only supports numeric answers. Did you mean to make a (Text/Math Expression) Input problem?',
+    description: 'Error numeric describing wrong format',
+  }
 });
 
 export default messages;

src/editors/containers/ProblemEditor/data/OLXParser.js

@@ -96,7 +96,7 @@ export const responseKeys = [
  * []
  */
 export const answerRangeFormatRegex = /^[([]\s*-?(?:\d+(?:\.\d+)?|\d+\/\d+)\s*,\s*-?(?:\d+(?:\.\d+)?|\d+\/\d+)\s*[)\]]$/m;
-
+export const numericRegex = /^[+-]?(\d+(\.\d*)?|\.\d+)$/;
 export const stripNonTextTags = ({ input, tag }) => {
   const stripedTags = {};
   Object.entries(input).forEach(([key, value]) => {